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

Question

var data_url=canvas.toDataURL("image/png");

var img=$("#img").attr("src",data_url);

img 文件大小（以 kb 为单位）是多少？

Answer 1

如果你想知道 data-url 的大小（以字节为单位），你可以这样做：

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

base64 估计值总是会有所不同！解码 Base64 字符串并检查其长度。这个方法总是100%准确！

一旦您剥离 MIME 类型（通过

split

）并解码字符串（通过 atob），生成的字符串长度应与最终文件大小相同。

let size_in_bytes = window.atob(base64.split(",")[1]).length;

Answer 3

最好的思考方式是每个字符代表 6 位（2^

6 == 64，因此是 Base64）。将字符数乘以 6 即可得到总位数。然后将总位数除以8即可得到字节数，因为一个字节是8位。

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

与

Math.round(base64String.length * 3 / 4);

相同。

Answer 4

我没有发现 Pedro 的解决方案准确，我所做的是从画布中创建一个 blob，然后获取文件大小

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