JavaScript教程：将Base64图片转换为ImageData数组

/**
 * 将Base64编码的图片字符串转换为ImageData对象。
 * 该函数返回一个Promise，在图片加载并转换成功时解析为ImageData对象，
 * 或在加载失败时拒绝。
 *
 * @param {string} base64String - Base64编码的图片字符串，例如 "data:image/png;base64,..."。
 * @returns {Promise<ImageData>} - 返回一个Promise，解析为ImageData对象。
 */
function convertBase64ToImageData(base64String) {
  return new Promise((resolve, reject) => {
    // 1. 创建一个Image对象
    const image = new Image();

    // 监听图片加载成功事件
    image.onload = function() {
      // 2. 创建一个Canvas元素
      const canvas = document.createElement("canvas");
      // 设置Canvas的尺寸与图片相同，确保完整绘制
      canvas.width = image.width;
      canvas.height = image.height;

      // 获取Canvas的2D渲染上下文
      const ctx = canvas.getContext('2d');

      // 3. 将图片绘制到Canvas上
      // 参数：图片对象，绘制起始X坐标，绘制起始Y坐标
      ctx.drawImage(image, 0, 0);

      // 4. 从Canvas中提取ImageData
      // getImageData(x, y, width, height) 获取指定区域的像素数据
      const imageData = ctx.getImageData(0, 0, image.width, image.height);

      // 可以在此处将canvas添加到DOM中进行调试，例如：
      // document.body.appendChild(canvas);
      // 但在实际应用中，如果仅需数据，通常不需要显示canvas。

      console.log("ImageData对象已成功生成:", imageData);
      resolve(imageData); // 解析Promise，返回ImageData对象
    };

    // 监听图片加载失败事件
    image.onerror = function(error) {
      console.error("图片加载失败:", error);
      reject(new Error("Failed to load image from base64 string.")); // 拒绝Promise
    };

    // 5. 设置Image的src属性，触发图片加载
    // 确保Base64字符串包含MIME类型前缀，例如 "data:image/png;base64,"
    image.src = base64String;
  });
}

// 示例用法：
// 这是一个Base64编码的24x24像素PNG图片数据（为简洁，已截断部分内容，但仍可运行）
const exampleBase64ImageString = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjapeSVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl/TvuiRW1m3n0eDl0vRPcEysqdXn/jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVe