多张图片像素化获取非空32x32像素数据问题求助

核心问题 #

1. onload事件绑定错误：直接调用pixelate()并将返回值赋值给onload，而非绑定函数引用，导致函数在图片未加载时就执行，此时图片资源未就绪，drawImage无法正确绘制，最终getImageData返回空像素数据。
2. 循环变量作用域问题：for循环中未使用let声明n，导致n成为全局变量，所有图片的onload回调会共享同一个n值，引发索引混乱。
3. 冗余的Image对象创建：页面中已有加载的<img>元素，无需重新创建img1A数组，直接利用现有元素的加载状态即可。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      height: 128px;
      width: 128px
    }
  </style>
</head>
<body>
  <img id="image1" src="https://picsum.photos/128">
  <img id="image2" src="https://picsum.photos/128">
  <form method="post" id="new">
    <input type="submit">
  </form>
</body>
<script>
  function rgba2hex(orig) {
    const rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
    if (!rgb) return orig;
    const hex = (rgb[1] | 1 << 8).toString(16).slice(1) + 
                (rgb[2] | 1 << 8).toString(16).slice(1) + 
                (rgb[3] | 1 << 8).toString(16).slice(1);
    const alpha = rgb[4] ? (rgb[4] | 1 << 8).toString(16).slice(1) : 'ff';
    return hex + alpha;
  }

  const formElement = document.getElementById("new");
  const imageArray = document.querySelectorAll('img');

  // 遍历图片，处理每张图片的加载与像素化
  imageArray.forEach((imageX, n) => {
    // 检查图片是否已加载完成
    const handlePixelate = () => {
      imageX.remove();
      const w = 128;
      const h = 128;
      const sampleSize = 4; // 对应32x32网格（128/4=32）

      const canvas = document.createElement("canvas");
      canvas.width = w;
      canvas.height = h;
      const ctx = canvas.getContext('2d');

      // 绘制原始图片到画布
      ctx.drawImage(imageX, 0, 0, w, h);
      const pixelArr = ctx.getImageData(0, 0, w, h).data;

      const log = {};
      // 遍历32x32网格，采样像素
      for (let y = 0; y < h; y += sampleSize) {
        const rowIndex = y / sampleSize;
        log[rowIndex] = {};
        for (let x = 0; x < w; x += sampleSize) {
          const colIndex = x / sampleSize;
          const p = (x + y * w) * 4;
          const r = pixelArr[p];
          const g = pixelArr[p + 1];
          const b = pixelArr[p + 2];
          const a = pixelArr[p + 3];
          
          // 绘制像素化区块
          ctx.fillStyle = `rgba(${r},${g},${b},${a})`;
          ctx.fillRect(x, y, sampleSize, sampleSize);
          
          // 记录32x32网格的颜色数据
          log[rowIndex][colIndex] = `#${rgba2hex(`rgba(${r},${g},${b},${a})`)}`;
        }
      }

      // 转换为目标JSON格式
      const hexJson = { pixel_json: {} };
      for (const row in log) {
        for (const col in log[row]) {
          const hex = log[row][col];
          const coord = { x: parseInt(col), y: parseInt(row) };
          if (!hexJson.pixel_json[hex]) {
            hexJson.pixel_json[hex] = [];
          }
          hexJson.pixel_json[hex].push(coord);
        }
      }

      // 添加隐藏输入框存储数据
      const hiddenInput = document.createElement("input");
      hiddenInput.name = `pixelData${n}`;
      hiddenInput.type = "hidden";
      hiddenInput.value = JSON.stringify(hexJson);
      formElement.appendChild(hiddenInput);

      // 显示像素化后的图片
      const pixelatedImg = new Image();
      pixelatedImg.src = canvas.toDataURL("image/png");
      pixelatedImg.width = 128;
      document.body.appendChild(pixelatedImg);
    };

    // 绑定加载事件：若图片已加载则立即执行，否则等待onload
    if (imageX.complete) {
      handlePixelate();
    } else {
      imageX.onload = handlePixelate;
    }
  });
</script>
</html>

关键修正说明 #

• 正确绑定onload事件：使用函数引用而非立即执行，确保图片加载完成后再处理像素化。
• 解决循环作用域问题：使用forEach遍历图片，每个回调拥有独立的n和imageX引用，避免索引混乱。
• 处理图片已加载的情况：通过image.complete判断图片是否已加载完成，兼容图片缓存或提前加载的场景。
• 优化代码结构：简化冗余变量，使用const/let声明变量避免全局污染，提升代码可读性。

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