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

How to get HTML5 Canvas.todataurl file size in javascript?

本文关键字：HTML5 Canvas todataurl 文件大小 获取 javascript      更新时间：2023-09-26
var data_url=canvas.toDataURL("image/png");
var img=$("#img").attr("src",data_url);

以 KB 为单位的 IMG 文件大小是多少？

如果你想知道数据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。

编辑：更正了注释后的大小计算。

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

去除 MIME 类型(通过 split (并解码字符串(通过 atob(后，生成的字符串长度应与最终文件大小相同。

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

最好的考虑方式是每个字符代表 6 位(2^6 == 64，因此以64 为基数(。因此，将您拥有的字符数量乘以 6 得到总位数。然后将总位数除以 8 得到字节数，因为一个字节是 8 位。

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

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

我没有

发现佩德罗的解决方案准确，我所做的是从画布上创建一个 blob，然后获取文件大小

canvas.toBlob(function(blob){
    alert(blob.size);
});
相关文章：