GetImageData 未返回比较 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

我怀疑您的问题实际上是在您的图像文件中使用了.jpgs，因为这些文件包含来自压缩的伪影。由于相当有损的压缩方法，即使更改一个像素和/或通过将.jpg 图像另存为新文件来重新压缩它，通常也会导致不止一个像素发生变化。我建议您尝试改用.png 图像，因为它们是（大多数情况下）无损格式。你这里的其余方法似乎很可靠。

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

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

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