जावास्क्रिप्ट

Question

में दो छवियों की तुलना करें मैं यह निर्धारित करने की कोशिश कर रहा हूं कि जावास्क्रिप्ट में दो छवियां समान हैं (भले ही src urls अलग हैं)।

मेरा विशिष्ट उपयोग केस क्रोम एक्सटेंशन के भीतर है (हालांकि यह क्रोम एक्सटेंशन वास्तव में प्रश्न में कारक नहीं है)। मैं img src को 'chrome://favicon/'+url पर सेट करके क्रोम के आंतरिक डेटाबेस में संग्रहीत एक फेविकॉन पीएनजी का इमेज प्राप्त कर सकता हूं जहां यूआरएल वेबसाइट का वास्तविक यूआरएल है। हालांकि, अब मैं सभी अद्वितीय फेविकॉन ढूंढना चाहता हूं। यह देखते हुए कि सभी के पास आंतरिक डेटाबेस के लिए एक अलग यूआरएल होगा, क्या जावास्क्रिप्ट में छवियों की तुलना करने का कोई आसान तरीका है?

धन्यवाद

Answer 1

नहीं, वहाँ कोई विशेष रूप से आसान तरीका यह है है। जावास्क्रिप्ट को निम्न स्तर के संचालन को संभालने के लिए नहीं बनाया गया था, जैसे छवि प्रसंस्करण के लिए बाइनरी डेटा के साथ सीधे काम करना।

आप use a <canvas> element to base64 encode each image कर सकते हैं, और उसके बाद परिणामी base64 तारों की तुलना करें, लेकिन यह केवल आपको बताएगा कि छवियां समान हैं या नहीं।

getBase64Image समारोह (उत्तर मैं जुड़ा हुआ में परिभाषित) का उपयोग करने के दो चित्रों की तुलना करने के लिए:

var a = new Image(), 
    b = new Image(); 
a.src = 'chrome://favicon/' + url_a; 
b.src = 'chrome://favicon/' + url_b; 

// might need to wait until a and b have actually loaded, ignoring this for now 
var a_base64 = getBase64Image(a), 
    b_base64 = getBase64Image(b); 

if (a_base64 === b_base64) 
{ 
    // they are identical 
} 
else 
{ 
    // you can probably guess what this means 
} 

Answer 2

हो सकता है कि इस उपकरण में मदद मिलेगी: https://github.com/HumbleSoftware/js-imagediff/

Answer 3

मैं आप इस जावास्क्रिप्ट में रुचि हो सकती लगता है पुस्तकालय resemble.js कहा जाता है जो: "analyses and compares images with HTML5 canvas and JavaScript"।

Answer 4

हमने अभी हल्की लाइब्रेरी RembrandtJS जारी की है, जो ठीक है और यह एचटीएमएल 5 कैनवास 2 डी एपीआई के साथ-साथ ड्रॉप-इन नोड.जेएस प्रतिस्थापन नोड-कैनवास के माध्यम से सर्वर पर दोनों ब्राउज़र में भी काम करता है। यह छवि स्रोत के रूप में दोनों धब्बे और यूआरएल को स्वीकार करता है तो आप बस ऐसा कर सकता है:

const rembrandt = new Rembrandt({ 
    // `imageA` and `imageB` can be either Strings (file path on node.js, 
    // public url on Browsers) or Buffers 
    imageA: 'chrome://favicon/' + url_a, 
    imageB: 'chrome://favicon/' + url_b, 

    thresholdType: Rembrandt.THRESHOLD_PERCENT, 

    // The maximum threshold (0...1 for THRESHOLD_PERCENT, pixel count for THRESHOLD_PIXELS 
    maxThreshold: 0, 

    // Maximum color delta (0...255): 
    maxDelta: 0, 

    // Maximum surrounding pixel offset 
    maxOffset: 0, 

}) 

// Run the comparison 
rembrandt.compare() 
    .then(function (result) { 

    if(result.passed){ 
     // do what you want 
    } 
    }) 

आप Rembrandt यदि आप डोमेन रंग या पिक्सेल अंतर के संबंध में कुछ छूट की आवश्यकता भी है, तो आप दहलीज मूल्यों को पेश करने की अनुमति देता है सकते हैं । चूंकि यह ब्राउज़र और सर्वर (नोड) दोनों में काम करता है, इसलिए यह आपके परीक्षण सूट में एकीकृत करना आसान बनाता है।