Fatal编程技术网
  • javascript/
  • 如何在javascript中获取HTML5 Canvas.todataurl文件大小？

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

javascript html5-canvas

如何在javascript中获取HTML5 Canvas.todataurl文件大小？,javascript,html5-canvas,Javascript,Html5 Canvas,var data_url=canvas.toDataURL（“image/png”） var img=$（“#img”）.attr（“src”，数据url） img文件的大小（kb）是多少？如果您想知道数据url的大小（字节），可以执行以下操作： var imgFileSize=data\u url.length 但这不是png大小的真实大小。您可以通过以下方式非常精确地近似于实际PNG大小： var head = 'data:image/png;base64,'; var imgFileSiz

var data_url=canvas.toDataURL（“image/png”）

var img=$（“#img”）.attr（“src”，数据url）

img文件的大小（kb）是多少？

如果您想知道数据url的大小（字节），可以执行以下操作：

var imgFileSize=data\u url.length

但这不是png大小的真实大小。您可以通过以下方式非常精确地近似于实际PNG大小：


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


因为Base64编码有4/3的开销


编辑：在评论后更正了大小计算。
我发现Pedro的解决方案并不准确，我所做的是从画布中创建一个blob，然后获取文件大小


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



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


Math.round（base64String.length*6/8）

与
Math.round（base64String.length*3/4）相同

base64估计值始终会有所不同

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


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



什么文件？这里没有文件，对不起！Base64的开销为4/3，因此原始文件比Base64小3/4倍。我已经更正了答案。如果Base64=4/3*Original，那么Original=3/4*Base64+1你绝对正确。我不再懂数学了…：-|这周真是乱七八糟（嗯）。如何穿上尺码mb@CraZyDroiD
Math.round（（数据长度-头部长度）*3/4）/1024/1024