JavaScript API برای مقایسه تصاویر PNG

کتابخانه جاوا اسکریپت منبع باز که از مقایسه تصاویر PNG در برنامه های جاوا اسکریپت پشتیبانی می کند. از مقایسه تصاویر PNG با نادیده گرفتن antialiasing و با نادیده گرفتن caret پشتیبانی می کند. 

مقایسه تصاویر با تصاویر با استفاده از جاوا اسکریپت می تواند بسیار سخت و چالش برانگیز باشد. انتخاب ابزار نادرست نیز می تواند تاثیر زیادی بر عملکرد داشته باشد. LooksSame یک کتابخانه جاوا اسکریپت منبع باز است که دارای عملکردی برای مقایسه تصاویر PNG در داخل برنامه های جاوا اسکریپت است و در هر دستگاهی کار می کند. این کتابخانه با در نظر گرفتن درک رنگ انسان ایجاد شده است. این کتابخانه عمدتاً برای نیازهای آزمایش رگرسیون بصری برای ابزار Gemini ایجاد شده است.

این کتابخانه به توسعه دهندگان اجازه می دهد تا به راحتی و با استفاده از دستورات جاوا اسکریپت تفاوت بین دو تصویر PNG را به راحتی مقایسه کنند. پشتیبانی از پردازش تصاویر PNG را با ارائه مسیرهایی به فایل ها یا تصاویر داخل بافر ارائه می دهد. استفاده از تنظیمات پیش‌فرض تنها تفاوت قابل توجه را شناسایی می‌کند و اگر نیاز به تشخیص تفاوت‌های خاصی دارید، لطفاً گزینه سخت‌گیرانه را انتخاب کنید.

این کتابخانه از چندین ویژگی مهم مرتبط با مقایسه تصویر پشتیبانی کرده است، مانند مقایسه تصاویر با ignoring caret، مقایسه تصاویر با نادیده گرفتن antialiasing، گرفتن کرانه های تفاوت، گرفتن خوشه های متفاوت، ساختن تصاویر تفاوت، ساخت تصاویر متفاوت به عنوان بافر، مقایسه رنگ ها و خیلی بیشتر.

Previous Next

شروع به کار با LooksSame

روش توصیه شده برای نصب LooksSameis از طریق NPM. لطفا از دستور زیر برای نصب آن استفاده کنید.

LooksSame را از طریق NPM نصب کنید

 npm install looks-same 

مقایسه تصاویر PNG در برنامه های جاوا اسکریپت

کتابخانه LooksSame به برنامه نویسان نرم افزار این امکان را می دهد که به صورت برنامه نویسی تصاویر PNG خود را با استفاده از Node.js مقایسه کنند. شما باید مسیر صحیح تصاویر PNG یا بافر را به عنوان پارامتر ارائه دهید. یک مثال ساده از مقایسه تصویر می تواند گرفتن اسکرین شات از عنصر DOM با تصویر و استفاده از کتابخانه برای مقایسه آن با تصویر محلی باشد. همچنین می توانید از RequestLogger برای ثبت درخواست برای تصویر استفاده کنید و بدنه پاسخ را با فایل محلی با استفاده از متد Buffer.compare() مقایسه کنید.

مقایسه تصاویر PNG از طریق JavaScript API

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

مقایسه تصاویر PNG با نادیده گرفتن Antialiasing

هر تصویر از پیکسل تشکیل شده است و هنگام مقایسه این تصاویر، رنگ هر پیکسل در تصویر یک را با رنگ پیکسل در محل مربوط به تصویر مقایسه می کنید. بنابراین در صورتی که برخی از پیکسل ها متفاوت باشند، می توانید بگویید که تصاویر مطابقت ندارند. معمولاً زمانی که رزولوشن تصویر برای پردازشگر پایین است که خطوط صاف را به درستی ارائه کند، نام مستعار اتفاق می افتد. تکنیک anti-aliasing برای ایجاد ظاهری صاف‌تر استفاده می‌شود و بنابراین نتایج مقایسه متفاوتی در هر محیط دریافت می‌کنید. برخی از تصاویر در مقایسه با آنها به دلیل آنتی آلیاسینگ تفاوت هایی دارند. کتابخانه LooksSame با نادیده گرفتن برخی از پیکسل‌هایی که احتمالاً anti-aliasing در آن‌ها رخ داده است، با مسائل ضد aliasing سروکار دارد. این تفاوت ها به طور پیش فرض نادیده گرفته می شوند.

Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The ضد همخوانی technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with ضد همخوانی issues by ignoring certain of the pixels where ضد همخوانی is likely to have occurred. These differences will be ignored by default.

مقایسه تصاویر با نادیده گرفتن Antialiasing و Caret از طریق جاوا اسکریپت

 const fs = require("fs");
const http = require("http");
const looksSame = require("looks-same");
const noop = () => null;
const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";
const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};
http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");
      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

مقایسه تصاویر با نادیده گرفتن Caret

کتابخانه رایگان LooksSame عملکردی را برای نادیده گرفتن دقت در جعبه‌های ورودی در حین مقایسه دو تصویر در داخل برنامه‌های خود ارائه کرده است. دقت متن در عنصر ورودی متن برای کارهای رگرسیون بصری دردسرساز است زیرا همیشه چشمک می‌زند. گاهی اوقات هنگام مقایسه دو جعبه متن یا تصاویر باکس ورودی، به دلیل ارائه تصویر، مقایسه برای تفاوت پیکسل ناموفق است. بنابراین می توانید گزینه caret را نادیده بگیرید تا نادیده گرفتن چنین تفاوت هایی را غیرفعال کنید.

 فارسی