getImageData总是返回0 [英] getImageData always returning 0

问题描述

我一直在尝试制作一个脚本，比较HTML5和Javascript中的两个图片。但是由于一些奇怪的原因，它总是返回图像是完全一样的。

I have been trying to make a script that compares two images in HTML5 and Javascript. But for some odd reason, it always returns that the images are completely the same.

当看到什么问题，我发现每个数据值每个像素返回，由于一些奇怪的原因，0。

And when looking at what the problem could be, I found out that every data value of every pixel returned, for some odd reason, "0".

所以，任何想法我做错了什么？ :)

So, any idea of what I have done wrong? :)

由于某种原因，我觉得它很简单，但我刚刚了解了canvas元素，所以是啊。

For some reason I feel like it's something very simple, but I just learned about the canvas element, so yeah.

这是我的代码：

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

推荐答案

在执行比较之前已加载并绘制图像。尝试此操作：

You are not waiting until your images have loaded and drawn before performing your comparison. Try this:

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 code> onload 。

As shown above, you should always set your src after your onload.

这篇关于getImageData总是返回0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！