获取图像数据不返回比较 2 个图像的预期结果

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用于图像文件，因为它们包含压缩的伪影。由于相当有损的压缩方法，即使更改一个像素和/或通过将其另存为新文件来重新压缩.jpg图像也经常会导致多个像素发生变化。我建议您尝试使用.png图像，因为它们是一种(大多数情况下，通常是(无损格式。 你在这里的其余方法似乎很可靠。

或者，为了测试代码以确保它正常工作，您可以只将其中一个图像加载到两个画布中，然后在一个画布上选择一个任意点(在本例中，myCanvas2中的点(100,100((，并快速创建一个意外颜色的单像素矩形(例如，#FF0080(

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

就在比较两个画布之前。这可能不适用于您要追求的最终情况，但它应该准确地测试您编写的函数。