JavaScript API להשוואת תמונות PNG

תחילת העבודה עם LooksSame

הדרך המומלצת להתקין את 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

כל תמונה מורכבת מפיקסלים ותוך כדי השוואה בין התמונות הללו אתה משווה את הצבע של כל פיקסל בתמונה אחת עם צבע הפיקסלים במיקום המתאים של התמונה. אז במקרה שחלק מהפיקסלים אינם דומים, אז אתה יכול לראות שהתמונות אינן תואמות. בדרך כלל, כינוי מתרחש כאשר הרזולוציה של תמונה נמוכה מאוד כדי שהמעבד יציג בצורה נכונה קווים חלקים. טכניקת האנטי-aliasing מיושמת כדי לתת מראה חלק יותר וכך מקבלים תוצאות השוואה שונות לכל סביבה. לחלק מהתמונות יש הבדלים בזמן ההשוואה ביניהן בגלל התאמה נגדית. ספריית LooksSame מטפלת בבעיות של אנטי-aliasing על ידי התעלמות מחלק מהפיקסלים שבהם סביר שהתרחשה anti-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);

השוואת תמונות על ידי התעלמות מ-Cart

ספריית LooksSame החינמית סיפקה פונקציונליות להתעלמות מ-caret בתיבות קלט תוך השוואה בין שתי תמונות בתוך היישומים שלהם. סימן טקסט ברכיב קלט הטקסט הוא כאב עבור משימות רגרסיה חזותית מכיוון שהוא תמיד מהבהב. לפעמים כאשר משווים בין שתי תיבות טקסט או תמונות של תיבות קלט, בגלל התמונה נותנים דאגה ההשוואה נכשלת עבור ההבדל בפיקסלים. אז אתה יכול להתעלם מאפשרות ה-caret להשבית התעלמות מהבדלים כאלה.