javascript - 从 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);

请注意，这只是第一次加载图像时出现的问题，您的代码在后续调用中按原样工作 - 推测这与浏览器处理和缓存数据的方式有关。