从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

确保使用data:image/png;base64,

添加src

所以它应该是

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