javascript - 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

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

或者，为了测试您的代码以确保其正常工作，您可以只将其中一张图像加载到两个 Canvas 中，然后选择一个任意点(对于本例，点 (100, 100) 在 myCanvas2) 并快速绘制一个意想不到颜色的单像素矩形(例如，#FF0080)

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

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