JavaScript中Base64图片到ImageData数组的转换指南

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

    // 设置图片加载成功后的回调
    image.onload = function() {
      // 2. 创建一个离屏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) {
        reject(new Error("无法获取Canvas 2D上下文。"));
        return;
      }

      // 4. 将图片绘制到Canvas上
      ctx.drawImage(image, 0, 0);

      // 5. 从Canvas中提取ImageData
      try {
        const imageData = ctx.getImageData(0, 0, image.width, image.height);
        resolve(imageData); // 解析Promise，返回ImageData对象
      } catch (error) {
        reject(new Error("从Canvas提取ImageData失败: " + error.message));
      }

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

    // 设置图片加载失败后的回调
    image.onerror = function(error) {
      reject(new Error("图片加载失败，请检查Base64字符串是否有效或存在CORS问题。"));
    };

    // 6. 设置Image对象的src属性，开始加载Base64图片
    image.src = base64String;
  });
}

// 示例Base64图片字符串 (此处为一个非常小的PNG图片示例)
const base64ImageString = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3Njapey4nI="; // 实际应为更长的有效Base64字符串

// 调用函数进行转换
convertBase64ToImageData(base64ImageString)
  .then(imageData => {
    console.log("成功获取ImageData对象：", imageData);
    console.log("ImageData宽度：", imageData.width);
    console.log("ImageData高度：", imageData.height);
    console.log("像素数据数组长度：", imageData.data.length);
    // 此时，imageData.data 就是包含RGBA像素数据的一维数组
    // 例如，可以访问第一个像素的红色分量：imageData.data[0]
  })
  .catch(error => {
    console.error("转换失败：", error);
  });

// 如果需要一个更直观的例子，可以将canvas添加到页面并显示
// 以下代码仅用于演示，实际应用中可能不需要显示canvas
const exampleBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3Njapey4nI="; // 替换为你的Base64字符串
const displayImage = new Image();
displayImage.onload = function() {
  const displayCanvas = document.createElement("canvas");
  displayCanvas.width = displayImage.width;
  displayCanvas.height = displayImage.height;
  const displayCtx = displayCanvas.getContext('2d');
  displayCtx.drawImage(displayImage, 0, 0);
  document.body.appendChild(displayCanvas); // 将canvas添加到页面显示
  console.log("Canvas已添加到页面，显示图片。");
};
displayImage.onerror = function() {
  console.error("无法加载图片进行显示。");
};
displayImage.src = exampleBase64;