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

Question

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

var img = $（“＃img”）。attr（“src”，data_url）;

kb中的 img 文件大小是什么？

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

考虑它的最佳方式是每个字符代表6位（2 ^ 6 == 64，因此Base 64 ）。因此，使用6的字符数来获得总位数。然后将总位数除以8得到字节数，因为一个字节是8位。

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

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

Answer 3

  

base64估算值始终会有所不同！

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

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

Answer 4

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

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

现在，canvas.toBlob是一个工作草案，但我使用的是pollyfill

我认为canvas.mozGetAsFile也可以工作，但我还没有测试过