从 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 前面加上 data:image/png;base64,

所以应该是

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

Answer 2

设置 src 和图像处于 "loaded" 状态（因此具有尺寸）之间的步骤是异步的 - 这似乎适用于数据 URI 以及外部资源（至少在 Chrome).

为了安全地保证 width 和 height 被填充，回调中的逻辑应该是运行 - 即

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

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

Get dimensions from Base64 encoded image