10

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

在查看问题可能是什么时，我发现每个像素的每个数据值都返回，出于某种奇怪的原因，“0”。

那么，知道我做错了什么吗？:)

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

这是我的代码：

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 + "%";
}
4

2 回答 2

6

在执行比较之前，您不会等到图像加载和绘制完毕。试试这个：

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.

于 2011-04-17T16:11:25.883 回答
1

我怀疑问题在于您的图像数据在您尝试将其用于画布时可能还没有准备好。如果您将该代码推迟到 onload 处理程序，那将（可能）帮助：

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

function checkReadiness() {
  if (--count !== 0) return;

  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 + "%";
}

我所做的只是在您的代码周围添加一个函数包装器。该函数检查我添加的图像计数变量，只有当它为零时（即，只有在两个图像都加载后）才会起作用。

（这可能是迷信，但我总是在设置“src”属性之前分配“onload”处理程序。我有这样的想法，也许只是在过去，如果图像已经在浏览器中，浏览器可能无法运行处理程序缓存。）

现在还有一件事：您可能应该只获取一次图像数据，然后遍历返回的数据。为每个像素调用“getImageData()”对于浏览器来说将是很多工作。

于 2011-04-17T16:09:56.960 回答