Question

如果我有2个图像是相同的，除了我改变1个像素，它说我的阵列有131个不同的变化。为什么会这样？我使用getcanvasdata创建了2个数组，并使用循环来比较两者。

var c = document.getElementById("myCanvas");
var c2 = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
var img = new Image();
var img2 = new Image();
var diffpixels = [];
var imgData;
var imgData2;
img.src = "avengers2.jpg";
img2.src = "avengers1.jpg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  imgData = ctx.getImageData(0, 0, 1920, 1080).data;

  img2.onload = function() {
    ctx2.drawImage(img2, 0, 0);
    imgData2 = ctx2.getImageData(0, 0, 1920, 1080).data;
    console.log(imgData2.length);
    for (var i = 0; i < imgData.length; i++) {
      if (imgData[i] === imgData2[i]) {} else {
        diffpixels.push(i);
      }
    }
    console.log(diffpixels);
  }
}

<canvas id="myCanvas" width="1920" height="1080" style="border:1px solid #d3d3d3"></canvas>
<canvas id="myCanvas2" width="1920" height="1080" style="border:1px solid #d3d3d3"></canvas>

Answer 1

我怀疑你的问题实际上是使用.jpg s来处理你的图像文件，因为它们包含来自压缩的工件。通过将.jpg图像保存为新文件来更改甚至一个像素和/或重新压缩.png图像会导致多个像素由于相当有损的压缩方法而发生变化。我建议您尝试使用myCanvas2图像，因为它们（通常是）通常是无损格式。你的方法的其余部分似乎很可靠。

或者，为了测试您的代码以确保其有效，您可以将其中一个图像加载到两个画布中，然后选择一个任意点（对于此示例，{（100,100）中的点（100,100） {1}}）在一个并做一个意想不到的颜色的快速单像素矩形（例如，＃FF0080）

ctx2.fillStyle = "#FF0080";
ctx2.fillRect(100, 100, 1, 1);

在比较两幅画布之前。这可能不适用于你想要的最终案例，但它应该准确地测试你写的函数。

GetImageData没有返回比较2个图像的预期结果

1 个答案: