從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;