JavaScript中如何将Base64图片转换为ImageData数组

/**
 * 将Base64图片字符串转换为ImageData对象
 * @param {string} base64String 包含图片数据的Base64字符串，例如 "data:image/png;base64,iVBORw0KGgo..."
 * @returns {Promise<ImageData>} 返回一个Promise，解析为ImageData对象
 */
function convertBase64ToImageData(base64String) {
  return new Promise((resolve, reject) => {
    // 1. 创建HTML Image对象
    const image = new Image();

    // 监听图片加载成功事件
    image.onload = function() {
      // 2. 创建HTML Canvas元素
      const canvas = document.createElement("canvas");
      // 设置Canvas尺寸与图片一致
      canvas.width = image.width;
      canvas.height = image.height;

      // 3. 获取Canvas 2D渲染上下文
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        return reject(new Error("无法获取Canvas 2D渲染上下文。"));
      }

      // 4. 将图片绘制到Canvas上
      // 参数：图片对象，x坐标，y坐标，宽度，高度
      ctx.drawImage(image, 0, 0, image.width, image.height);

      // 5. 提取ImageData对象
      // 参数：x坐标，y坐标，宽度，高度
      const imageData = ctx.getImageData(0, 0, image.width, image.height);

      // 成功解析Promise，返回ImageData对象
      resolve(imageData);

      // 可选：将Canvas添加到文档中以供调试或显示
      // document.body.appendChild(canvas);
    };

    // 监听图片加载失败事件
    image.onerror = function(error) {
      reject(new Error("图片加载失败，请检查Base64字符串是否有效。", error));
    };

    // 1. 设置Image对象的src属性为Base64字符串，触发图片加载
    image.src = base64String;
  });
}

// 示例Base64图片字符串 (这是一个小尺寸的PNG图片示例)
const sampleBase64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjapeAAAAASUVORK5CYII=";

// 调用函数进行转换
convertBase64ToImageData(sampleBase64Image)
  .then(imageData => {
    console.log("成功获取ImageData对象:", imageData);
    console.log("ImageData宽度:", imageData.width);
    console.log("ImageData高度:", imageData.height);
    console.log("像素数据（Uint8ClampedArray）:", imageData.data);

    // 示例：获取第一个像素的RGBA值
    const firstPixelR = imageData.data[0];
    const firstPixelG = imageData.data[1];
    const firstPixelB = imageData.data[2];
    const firstPixelA = imageData.data[3];
    console.log(`第一个像素的RGBA值: R=${firstPixelR}, G=${firstPixelG}, B=${firstPixelB}, A=${firstPixelA}`);

    // 你现在可以使用imageData.data进行像素级别的操作，例如修改颜色或应用滤镜
  })
  .catch(error => {
    console.error("转换Base64图片到ImageData失败:", error);
  });

// 如果你需要一个实际可见的Canvas来验证，可以取消上面示例代码中的注释
// document.body.appendChild(canvas);