JavaScript API لمقارنة صور PNG

الشروع في العمل مع LooksS Same

الطريقة الموصى بها لتثبيت LooksSameis عبر NPM. الرجاء استخدام الأمر التالي لتثبيته.

 npm install looks-same 

قارن صور PNG داخل تطبيقات JavaScript

تمنح مكتبة 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

تتكون كل صورة من وحدات البكسل ، وأثناء مقارنة هذه الصور ، يمكنك مقارنة لون كل بكسل في صورة واحدة مع لون البكسل في الموقع المقابل للصورة. لذلك في حالة اختلاف بعض وحدات البكسل ، يمكنك معرفة أن الصور غير متطابقة. عادةً ما يحدث التشويش عندما تكون دقة الصورة منخفضة جدًا حتى يتمكن المعالج من عرض الخطوط المتجانسة بشكل صحيح. يتم تطبيق تقنية الصقل لإضفاء مظهر أكثر سلاسة ، وبالتالي تحصل على نتائج مقارنة مختلفة لكل بيئة. بعض الصور لها اختلافات أثناء مقارنتها بسبب منع التشويش. تتعامل مكتبة LooksSame مع مشكلات الصقل من خلال تجاهل بعض وحدات البكسل التي من المحتمل أن يكون قد حدث فيها الصقل. سيتم تجاهل هذه الاختلافات بشكل افتراضي.

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);

مقارنة الصور بتجاهل علامة الإقحام

توفر مكتبة LooksSame المجانية وظائف لتجاهل علامة الإقحام في مربعات الإدخال أثناء مقارنة صورتين داخل تطبيقاتهما الخاصة. يمثل حرف الإقحام في عنصر إدخال النص ألمًا لمهام الانحدار البصري لأنه يومض دائمًا. في بعض الأحيان عند مقارنة مربعي نص أو صور مربعات إدخال ، نظرًا لأن الصورة تعطي علامة إقحام ، تفشل المقارنة في اختلاف البكسل. لذا يمكنك تجاهل خيار علامة الإقحام لتعطيل تجاهل مثل هذه الاختلافات.