Canvas getImageData获取视觉差异图像数据始终相同的问题求助

你的问题出在两个关键地方：错误的二进制数据处理方式，以及不可靠的图片加载时机控制，导致视觉不同的图片生成了相同的哈希值。

核心问题1：错误的哈希计算数据源 #

你当前的代码把像素数据（Uint8Array）转成字符串，再用TextEncoder编码成UTF-8，这完全是错误的处理方式：

• pixData.toString()会把字节数组转成逗号分隔的数字字符串（比如[255,0,0]变成"255,0,0"），这一步已经丢失了原始二进制的紧凑性，而且对大图片来说性能极差。
• TextEncoder是用来编码UTF-8文本的，不是用来处理原始二进制数据的，强行用它编码非文本的二进制数据会导致数据损坏，最终可能让不同的像素数据生成相同的哈希值。

正确的做法是直接把像素数据的ArrayBuffer传给crypto.subtle.digest，因为该方法本身就支持接收二进制的ArrayBuffer作为输入。

核心问题2：不可靠的图片加载时机 #

用setTimeout(process, 5000)来等待图片加载是非常不可靠的——如果网络较慢，5秒内图片还没加载完成，此时img.width和img.height都是0，绘制到画布后得到的是空像素数据，所有图片的哈希自然会相同。我们应该用Promise监听每个图片的load事件，确保所有图片完全加载后再进行处理。

修复后的完整代码 #

JavaScript（index.js） #

// 封装图片加载的Promise函数
function loadImage(imgElement) {
  return new Promise((resolve, reject) => {
    if (imgElement.complete && imgElement.naturalWidth !== 0) {
      // 图片已经加载完成
      resolve(imgElement);
      return;
    }
    imgElement.crossOrigin = "Anonymous";
    imgElement.onload = () => resolve(imgElement);
    imgElement.onerror = (err) => reject(new Error(`图片加载失败: ${err.message}`));
  });
}

async function processImages() {
  try {
    // 获取图片元素并等待所有图片加载完成
    const img1 = document.getElementById("img1");
    const img2 = document.getElementById("img2");
    const img3 = document.getElementById("img3");
    await Promise.all([loadImage(img1), loadImage(img2), loadImage(img3)]);

    // 定义生成图片哈希的工具函数
    async function getImageHash(img) {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      ctx.drawImage(img, 0, 0);

      try {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // 直接传入像素数据的ArrayBuffer进行哈希计算
        const hashBuffer = await crypto.subtle.digest("SHA-256", imageData.data.buffer);
        // 把哈希转成十六进制字符串（比数组toString更易读且唯一）
        return Array.from(new Uint8Array(hashBuffer))
          .map(b => b.toString(16).padStart(2, '0'))
          .join('');
      } catch (err) {
        throw new Error(`获取像素数据失败: ${err.message}，可能是跨域CORS问题`);
      }
    }

    // 计算三张图片的哈希
    const [img1Hash, img2Hash, img3Hash] = await Promise.all([
      getImageHash(img1),
      getImageHash(img2),
      getImageHash(img3)
    ]);

    // 输出结果
    console.log("图片1哈希:", img1Hash);
    console.log("图片2哈希:", img2Hash);
    console.log("图片3哈希:", img3Hash);
    console.log("图片1与图片2是否相同:", img1Hash === img2Hash); // 预期true
    console.log("图片1与图片3是否相同:", img1Hash === img3Hash); // 预期false
    console.log("图片2与图片3是否相同:", img2Hash === img3Hash); // 预期false
  } catch (err) {
    console.error("处理图片失败:", err.message);
  }
}

// 页面加载完成后启动处理
window.onload = processImages;

HTML #

<!DOCTYPE html>
<html>
<head>
  <script src="index.js"></script>
</head>
<body>
  <img src="https://i.imgur.com/M0K21iS.jpg" id="img1" />
  <img src="https://i.imgur.com/uNbsNAd.jpg" id="img2" />
  <img src="https://i.imgur.com/QdqhGb9.jpg" id="img3" />
</body>
</html>

额外注意事项 #

• 跨域CORS问题：如果运行时出现"获取像素数据失败"的错误，说明图片服务器的CORS配置不允许你读取像素数据。此时需要确保图片来源支持CORS（imgur的图片通常是支持的，但如果是其他域名可能需要调整）。
• 哈希可读性：修复后的代码把哈希转成了十六进制字符串，比原来的数组toString更易读，而且保证唯一性。
• 性能优化：使用Promise.all并行处理图片加载和哈希计算，比串行处理效率更高。

内容的提问来源于stack exchange，提问作者Bill