PNG छवियों की तुलना करने के लिए JavaScript API

लुक्ससेम के साथ शुरुआत करना

NPM के माध्यम से LookSameis को स्थापित करने का अनुशंसित तरीका। कृपया इसे स्थापित करने के लिए निम्न आदेश का उपयोग करें।

 npm install looks-same 

जावास्क्रिप्ट ऐप्स के अंदर पीएनजी छवियों की तुलना करें

लुक्ससेम लाइब्रेरी सॉफ्टवेयर प्रोग्रामर्स को Node.js का उपयोग करके अपनी पीएनजी छवियों की प्रोग्रामेटिक रूप से तुलना करने की क्षमता देती है। आपको पैरामीटर के रूप में पीएनजी छवियों या बफर को सही पथ प्रदान करने की आवश्यकता है। छवि तुलना का एक सरल उदाहरण छवि के साथ डीओएम तत्व का स्क्रीनशॉट लेना और स्थानीय छवि के साथ तुलना करने के लिए पुस्तकालय का उपयोग करना हो सकता है। आप छवि के लिए अनुरोध लॉग करने के लिए 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
});

एंटीएलियासिंग को अनदेखा करके पीएनजी छवियों की तुलना करें

प्रत्येक छवि पिक्सेल से बनी होती है और इन छवियों की तुलना करते समय आप छवि के प्रत्येक पिक्सेल के रंग की तुलना छवि के संबंधित स्थान पर पिक्सेल रंग से करते हैं। तो यदि कुछ पिक्सेल भिन्न हैं, तो आप बता सकते हैं कि चित्र मेल नहीं खा रहे हैं। आमतौर पर, एलियासिंग तब होता है जब प्रोसेसर के लिए चिकनी लाइनों को सही ढंग से प्रस्तुत करने के लिए छवि का रिज़ॉल्यूशन बहुत कम होता है। एंटी-अलियासिंग तकनीक को अधिक सहज रूप देने के लिए लागू किया जाता है और इस प्रकार आपको प्रति परिवेश भिन्न तुलना परिणाम प्राप्त होते हैं। एंटीएलियासिंग के कारण उनकी तुलना करते समय कुछ छवियों में अंतर होता है। लुक्ससेम लाइब्रेरी कुछ ऐसे पिक्सल्स की अनदेखी करके एंटी-अलियासिंग मुद्दों से निपटती है, जहां एंटी-अलियासिंग होने की संभावना है। इन अंतरों को डिफ़ॉल्ट रूप से अनदेखा कर दिया जाएगा।

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

कैरेट को अनदेखा करके छवियों की तुलना

फ्री लुक्ससेम लाइब्रेरी ने दो छवियों की अपने स्वयं के अनुप्रयोगों के अंदर तुलना करते हुए इनपुट बॉक्स पर कैरेट को अनदेखा करने के लिए कार्यक्षमता प्रदान की है। टेक्स्ट इनपुट एलिमेंट में टेक्स्ट कैरेट विज़ुअल रिग्रेशन कार्यों के लिए एक दर्द है क्योंकि यह हमेशा ब्लिंक करता है। कभी-कभी दो टेक्स्ट बॉक्स या इनपुट बॉक्स इमेज की तुलना करते समय, इमेज के कारण कैरेट की तुलना पिक्सेल अंतर के लिए विफल हो रही है। तो आप इस तरह के अंतर को अनदेखा करने के लिए कैरेट विकल्प को अनदेखा कर सकते हैं।