从Base64编码图像获取尺寸

Question

我有一个Angular应用程序，我需要Base64编码图像的尺寸。 我试图将其加载到一个Image，但它只是说，这是0x0

const image = new Image(); 
image.src = 'data:image/jpeg;base64,someBase64ImageString'; 

console.log(image.width + 'x' + image.height); 

我无法弄清楚如何得到这个信息。

Answer 1

设置src和图像中的“加载”状态（因此具有尺寸）之间的步骤是异步 - 这似乎适用于数据URI以及外部资源（至少在Chrome中）。

要安全保证width和height被填充，逻辑应该在回调运行 - 即

let im = new Image; 
im.src = 'data:image/png;base64,whatever'; 
im.onload =() => console.log(im.width); 

注意这只是一个问题，在第一时间的图像加载，你的代码工作原样用于连续调用 - 可以推测这与浏览器处理和缓存数据的方式有关。

Answer 2

确保你的src前面加上data:image/png;base64,

所以应该

img.src= 'data:image/png;base64,' + b64string;