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

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

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

 npm install looks-same 

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

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

 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.

 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 را نادیده بگیرید تا نادیده گرفتن چنین تفاوت هایی را غیرفعال کنید.