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

【问题标题】：How to get HTML5 Canvas.todataurl file size in javascript?如何在 javascript 中获取 HTML5 Canvas.todataurl 文件大小？
【发布时间】：2013-09-04 15:14:03
【问题描述】：

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

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

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

【问题讨论】：

什么文件？这里没有文件。

标签： javascript html5-canvas

【解决方案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 的开销。

编辑：修正了 cmets 后的尺寸计算。

【讨论】：

对不起！ Base64 有 4/3 的开销，因此原始文件比 Base64 小 3/4 倍。我已经更正了答案。
如果 Base64=4/3*Original，那么 Original=3/4*Base64
+1 你完全正确。而且我不再知道数学了... :-|这是多么混乱的一周（嗯）。
如何获取以mb为单位的大小
@CraZyDroiD Math.round((data_url.length - head.length) * 3 / 4) / 1024 / 1024

【解决方案2】：

base64 估计值总是不同的！

解码 base64 字符串并检查其长度。这种方法总是 100% 准确的！

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

【讨论】：

【解决方案3】：

考虑它的最佳方式是每个 char 代表 6 位（2^6 == 64，因此 Base64）。因此，将您拥有的字符数乘以 6 即可得到总位数。然后将总位数除以 8 得到字节数，因为一个字节是 8 位。

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

与Math.round(base64String.length * 3 / 4);相同。

【讨论】：

【解决方案4】：

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

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

【讨论】：

谢谢@Endless 这也适用于我，canvas.toBlob(function(blob){ document.getElementById("NewFsize").innerHTML = "New size: "+(blob.size) /1000000 + "兆字节" });