Как сравнить два разных изображения в java-скрипте

Question

У меня есть два разных URL-адреса, я хочу проверить, одинаковы или отличаются изображения с этим URL-адресом в java-скрипте. Я проверяю точное . . эти два URL в

Изображения Путь

url1="https://usercontent.googleapis.com/freebase/v1/image/m/030z4z" 
url2="https://usercontent.googleapis.com/freebase/v1/image/m/09jjsg" 

Answer 1

Вы можете конвертировать изображения в base64 строку, а затем сравнивать строки.

Попробуйте что-то вроде этого:

/** 
* Convert an image 
* to a base64 string 
* @param {String} url   
* @param {Function} callback  
* @param {String} [outputFormat=image/png]   
*/ 
function convertImgToBase64(url, callback, outputFormat){ 
    var canvas = document.createElement('CANVAS'), 
     ctx = canvas.getContext('2d'), 
     img = new Image; 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var dataURL; 
     canvas.height = img.height; 
     canvas.width = img.width; 
     ctx.drawImage(img, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback.call(this, dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 

var img1 = "http://image_url_1", 
    img2 = "http://image_url_2" 

convertImgToBase64(img1, function(base64Img1){ 
    convertImgToBase64(img2, function(base64Img2){ 
     alert(base64Img1 == base64Img2); 
    }); 
}); 

Answer 2

Во-первых, сравните размеры изображений с помощью

var img=document.getElementById("myImage"); //Which is an image element on DOM 

img.naturalWidth и img.naturalHeight для обоих изображений.

Если размеры изображений точно совпадают, добавьте две холсты в DOM того же размера, что и изображение, и нарисуйте соответствующие изображения;

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

ctx.drawImage(img,0,0); 

Затем сравните пиксель за пикселем, используя аналогичный метод this