Javascript 如何在java脚本中比较两个不同的图像

我有两个不同的URL，我想检查带有这些URL的图像在java脚本中是否相同或不同。我正在检查精确图像。 例如，这两个是URL

图像路径

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

---

您可以将图像转换为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);
    });
});

---

您可以将图像转换为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);
    });
});

---

首先，使用

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

---

然后使用与

类似的方法逐像素比较。首先，使用

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

---

然后使用与Hi类似的方法逐像素比较，检查以下内容：您想比较图像名称或图像大小？？正在检查精确的像素…通过like.jsHi获得解决方案，检查此项：您想比较图像名称或图像大小？？正在检查精确的像素…通过simple.js获得解决方案如果您想比较两个图像是否精确，这是一个好方法。如果您想比较两个图像是否精确，这是一个好方法。