JavaScript API เพื่อเปรียบเทียบรูปภาพ PNG

เริ่มต้นใช้งาน LookSame

วิธีที่แนะนำในการติดตั้ง LookSameis ผ่าน NPM โปรดใช้คำสั่งต่อไปนี้เพื่อติดตั้ง

 npm install looks-same 

เปรียบเทียบภาพ PNG ภายในแอป JavaScript

ไลบรารี LookSame ช่วยให้โปรแกรมเมอร์ซอฟต์แวร์สามารถเปรียบเทียบภาพ 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 โดยละเว้นการลบรอยหยัก

ภาพทุกภาพประกอบขึ้นจากพิกเซล และในขณะที่เปรียบเทียบภาพเหล่านี้ คุณเปรียบเทียบสีของพิกเซลทุกภาพในภาพหนึ่งกับสีพิกเซลในตำแหน่งที่สอดคล้องกันของภาพ ดังนั้น ในกรณีที่บางพิกเซลไม่เหมือนกัน คุณสามารถบอกได้ว่ารูปภาพไม่ตรงกัน โดยปกติ นามแฝงจะเกิดขึ้นเมื่อความละเอียดของภาพต่ำมากสำหรับโปรเซสเซอร์ในการเรนเดอร์เส้นที่เรียบลื่นอย่างถูกต้อง เทคนิค การลบรอยหยัก ถูกนำมาใช้เพื่อให้รูปลักษณ์ที่นุ่มนวลขึ้น และคุณจึงได้ผลลัพธ์การเปรียบเทียบที่แตกต่างกันไปตามสภาพแวดล้อม ภาพบางภาพมีความแตกต่างขณะเปรียบเทียบเนื่องจากการลดรอยหยัก ไลบรารี LookSame จัดการกับปัญหาการลบรอยหยักโดยไม่สนใจพิกเซลบางจุดที่อาจเกิดการลบรอยหยัก ความแตกต่างเหล่านี้จะถูกละเว้นโดยค่าเริ่มต้น

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

ไลบรารี LookSame ที่ให้บริการฟรีมีฟังก์ชันสำหรับการละเว้นเครื่องหมายคาเร็ตบนช่องใส่ข้อมูล ขณะที่เปรียบเทียบภาพสองภาพภายในแอปพลิเคชันของตนเอง เครื่องหมายคาเร็ตข้อความในองค์ประกอบการป้อนข้อความเป็นอุปสรรคต่องานการถดถอยด้วยภาพ เนื่องจากจะกะพริบตลอดเวลา บางครั้งเมื่อเปรียบเทียบกล่องข้อความสองกล่องหรือกล่องใส่รูปภาพ เนื่องจากรูปภาพให้เครื่องหมายคาเร็ต การเปรียบเทียบจึงล้มเหลวเนื่องจากความแตกต่างของพิกเซล ดังนั้นคุณจึงสามารถละเว้นตัวเลือกคาเร็ตเพื่อปิดใช้งานการละเว้นส่วนต่างดังกล่าวได้