如何从base64中获取图像的宽度、高度、Uint8ClampedArray
当处理基于 Base64 编码的图像数据时，您可以使用以下代码来获取图像的宽度、高度以及 Uint8ClampedArray（表示图像像素数据）：
一、基于typescript的实现
1 function base64DataURLToImageData(base64DataURL: string): Promise<ImageData> { 2 return new Promise((resolve, reject) => { 3 const img = new Image(); 4 5 img.onload = () => { 6 const canvas = document.createElement("canvas"); 7 const context = canvas.getContext("2d"); 8 canvas.width = img.width; 9 canvas.height = img.height; 10 if (!context) { 11 reject(new Error("context is null")); 12 return; 13 } 14 context.drawImage(img, 0, 0); 15 const imageData = context.getImageData(0, 0, canvas.width, canvas.height); 16 resolve(imageData); 17 }; 18 19 img.onerror = (error) => { 20 reject(error); 21 }; 22 23 img.src = base64DataURL; 24 }); 25 }
使用示例
1 // 示例用法： 2 const base64DataURL = "data:image/png;base64,iVBORw..."; // 替换为您的Base64数据URL 3 base64DataURLToImageData(base64DataURL) 4 .then((imageData) => { 5 console.log("图像宽度:", imageData.width); 6 console.log("图像高度:", imageData.height); 7 console.log("Uint8ClampedArray:", imageData.data); 8 }) 9 .catch((error) => { 10 console.error("处理图像时出错:", error); 11 });
1 // 提取 base64 图像数据部分 2 const imageData = await base64DataURLToImageData(base64DataURL);
二、基于javascript的实现
1 function base64DataURLToImageData(base64DataURL) { 2 return new Promise((resolve, reject) => { 3 const img = new Image(); 4 5 img.onload = () => { 6 const canvas = document.createElement("canvas"); 7 const context = canvas.getContext("2d"); 8 canvas.width = img.width; 9 canvas.height = img.height; 10 if (!context) { 11 reject(new Error("context is null")); 12 return; 13 } 14 context.drawImage(img, 0, 0); 15 const imageData = context.getImageData(0, 0, canvas.width, canvas.height); 16 resolve(imageData); 17 }; 18 19 img.onerror = (error) => { 20 reject(error); 21 }; 22 23 img.src = base64DataURL; 24 }); 25 }
使用示例
1 // 用法示例： 2 const base64DataURL = "data:image/png;base64,iVBORw0KG..."; // 你的Base64数据URL 3 base64DataURLToImageData(base64DataURL) 4 .then((imageData) => { 5 console.log("ImageData:", imageData); 6 // 在这里可以使用ImageData进行进一步处理 7 }) 8 .catch((error) => { 9 console.error("Error:", error); 10 });
