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

Question

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

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

img文件大小是多少 kb？

Answer 1

如果您想知道数据 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%准确！

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

Answer 3

考虑它的最佳方式是每个字符代表 6 位（2^ 6 == 64，因此是 Base 64 ）。 因此，将您拥有的字符数乘以 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);
});