Javascript getImageData始终返回0

我一直在尝试制作一个脚本来比较HTML5和Javascript中的两个图像。但出于某种奇怪的原因，它总是返回图像完全相同的结果

当研究问题可能是什么时，我发现每个像素的每个数据值都返回了“0”，这是出于某种奇怪的原因

那么，你知道我做错了什么吗？：）

出于某种原因，我觉得这很简单，但我刚刚了解了canvas元素，所以是的

这是我的代码：

function compareImg() {
    var c1 = document.getElementById("c");
    var ctx1 = c1.getContext("2d");
    var c2 = document.getElementById("c2");
    var ctx2 = c2.getContext("2d");

    var match = 0;

    var img1 = new Image();
    img1.src = "cat.jpg";
    img1.onload = function() {
        ctx1.drawImage(img1, 0, 0);
    }
    var img2 = new Image();
    img2.src = "bird.jpg";
    img2.onload = function() {
        ctx2.drawImage(img2, 0, 0);
    }


    for(var x = 0; x<c1.width; x++) {  // For each x value
        for(var y = 0; y<c1.height; y++) { // For each y value
            var data1 = ctx1.getImageData(x, y, 1, 1);
            var data2 = ctx2.getImageData(x, y, 1, 1);
            if (data1.data[0] == data2.data[0] && data1.data[1] == data2.data[1] && data1.data[2] == data2.data[2]) {
                match++;
            }
        }
    }
    var pixels = c1.width*c1.height;
    match = match/pixels*100;
    document.getElementById("match").innerHTML = match + "%";
}

函数比较（）{
var c1=document.getElementById（“c”）；
var ctx1=c1.getContext（“2d”）；
var c2=document.getElementById（“c2”）；
var ctx2=c2.getContext（“2d”）；
var匹配=0；
var img1=新图像（）；
img1.src=“cat.jpg”；
img1.onload=函数（）{
ctx1.drawImage（img1，0，0）；
}
var img2=新图像（）；
img2.src=“bird.jpg”；
img2.onload=函数（）{
ctx2.drawImage（img2,0,0）；
}
对于（var x=0；x我怀疑问题在于，在您尝试将图像数据用于画布时，图像数据可能还没有准备好。如果您将该代码推迟到onload处理程序，则（可能）会有帮助：

var img1=new Image（），count=2；
img1.src=“cat.jpg”；
img1.onload=函数（）{
ctx1.drawImage（img1，0，0）；
检查准备情况（）；
}
var img2=新图像（）；
img2.src=“bird.jpg”；
img2.onload=函数（）{
ctx2.drawImage（img2,0,0）；
检查准备情况（）；
}
功能检查就绪（）{
如果（--count！==0）返回；
对于（var x=0；x，在执行比较之前，您不会等待图像加载和绘制完成。请尝试以下操作：

var img = new Image;
img.onload = function(){
  ctx1.drawImage(img,0,0);
  var img = new Image;
  img.onload = function(){
    ctx2.drawImage(img,0,0);
    // diff them here
  };
  img.src = 'cat.jpg';
};
img.src = 'cat.jpg';

如上图所示，你应该一直这样做。
谢谢你回应我关于分配“src”和“onload”的顺序的迷信：-）也许这毕竟不是迷信！@Pointy investant，@Phrogz！这么多年来我一直在告诉人们这样做，我觉得是对的：-）你的意思是我应该把代码放在你写的“diff There”中比较图片的地方吗？很抱歉我不完全理解：）@iamarcel是的-这个答案和我的建议基本相同，只是方式略有不同。如果你尝试这个，你也会遇到同样的安全错误：-）现在我得到一个脚本获取图像数据的第一行出现“安全错误”…Chrome显示“安全错误：DOM异常18”，Firefox显示“错误：未捕获异常：[异常…”“安全错误”代码：“1000”nsresult:“0x805303e8（NS错误：DOM安全错误）…]”您正在从另一个域获取图像吗？如果是，那么这是一个安全错误：-）这被认为与试图处理从另一个域加载内容的
是同一类型的问题。不，我正在从与HTML文件相同的文件夹加载图像。（顺便说一下，本地）啊，一些/大多数/所有现代浏览器都将所有本地文件视为相互不可靠的文件。有些浏览器中有一个允许访问的选项；例如，对于Chrome浏览器，您可以用“允许从文件访问文件”标志启动它（很确定就是这样…）
var img = new Image;
img.onload = function(){
  ctx1.drawImage(img,0,0);
  var img = new Image;
  img.onload = function(){
    ctx2.drawImage(img,0,0);
    // diff them here
  };
  img.src = 'cat.jpg';
};
img.src = 'cat.jpg';