如何正确比较javascript中的两个图像？

我在Tampermonkey（谷歌Chrome）中使用javascript，我喜欢比较两个相同/非常相似的图像

我想我可以通过使用canvas元素来比较结果字符串，就像那样，但是无论我选择什么图像，我总是得到它们是相同的…：/

所以这个比较似乎不起作用，我也不知道为什么

编辑1：添加了一个计时器以等待图像加载 /

---

您需要等待图像加载，您可以使用在加载图像时通知您

var img = new Image();
img.onload = ()=>{
  //do work
};

因此：

---

注意：尽管您试图从

chrome://

协议加载资源，但由于安全限制，您实际上无法获取跨源资源的数据。要么从页面运行的同一域加载资源，要么使用文件输入来获取图像。

您必须等待图像加载，而您当前没有这样做that@PatrickEvans我不确定你说的是否正确，但我现在增加了5秒的延迟，它仍然一直在说“相同”：（您在比较上设置了延迟，而不是等待图像加载。不要添加延迟。在每个图像上添加

加载

。@cnmesr如果页面已加载，则不会；在每个图像加载后执行代码。提示：

x.addEventListener（“加载”，

…

）；y.addEventListener（“加载”，

…

）；

，虽然您需要一种方法来确保两个图像都已加载。非常感谢，这对我很有效！我只有您最后提到的问题，我需要使用来自同一域的资源，但我喜欢比较来自两个不同域的两个图像。“使用文件输入获取图像”是什么意思？@cnmesr我的意思是

用户可以从自己的系统中选择一个文件。你也可以使用代理服务器，即向服务器上的某个脚本发出请求，该脚本将获取实际图像并返回该图像，但这对

chrome://

URL不起作用。

var img = new Image();
img.onload = ()=>{
  //do work
};

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var x = new Image();
var y = new Image();
var url_x = "https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2010/03/google_logo.jpg";
var url_y = "https://nairobigarage.com/2017/wp-content/uploads/2015/02/6_logo_predesign.jpg";
x.src = 'chrome://favicon/' + url_x;
y.src = 'chrome://favicon/' + url_y;

//make the load events into promises
var xPromise = new Promise((resolve)=>{
   x.onload = resolve;
});
var yPromise = new Promise((resolve)=>{
   y.onload = resolve;
});
Promise.all([xPromise,yPromise]).then(()=>{
  var x_base64 = getBase64Image(x);
  var y_base64 = getBase64Image(y);
  if(x_base64 == y_base64){
    //match
  } else {
    //no match
  }
});