如何在javascript中獲取HTML5 Canvas.todataurl文件大小？

Question

var data_url = canvas.toDataURL（「image/png」）;

var img = $（「＃img」）。attr（「src」，data_url）;

什麼是img文件大小以kb爲單位？

Answer 1

如果你想知道數據地址的字節大小，你可以這樣做：

var imgFileSize = data_url.length;

但是，這不是PNG大小的實際尺寸。您可以用這種方法非常精確地近似於真實的PNG尺寸：

var head = 'data:image/png;base64,'; 
var imgFileSize = Math.round((data_url.length - head.length)*3/4) ; 

因爲Base64編碼有4/3開銷。

編輯：糾正了評論後的大小計算。

Answer 2

我沒有發現，佩德羅的解決方案准確的，我所做的就是要出畫布的創建BLOB，然後拿到檔案大小

canvas.toBlob(function(blob){ 
    alert(blob.size); 
}); 

canvas.toBlob是在這一刻工作草案，但我用一個pollyfill

我認爲canvas.mozGetAsFile也可以工作，但我還沒有測試

Answer 3

考慮它是每個字符表示6位（2^== 64的最佳方法，於是基地）。所以用你的字符數量乘以6得到總的位數。然後將總位數除以8得到字節數，因爲一個字節是8位。

Math.round(base64String.length * 6/8);

這是一樣的Math.round(base64String.length * 3/4);。