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

Codeium

一个免费的AI代码自动完成和搜索工具

345

查看详情

/**  * 将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);