javascript - javascriptでHTML5 Canvas.todataurlファイルサイズを取得するには?

Question

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

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

imgファイルのサイズは何kb ですか?

Answer 1

If you want to know the size of the data-url in bytes you can do:

var imgFileSize = data_url.length;

But that's not the real size of the png size. You can approximate very accurately to the real PNG size this way:

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

Because the Base64 encoding has a 4/3 overhead.

Edit: corrected the size calculation after comments.

Answer 2

それについて考える最良の方法は、各 char が 6 ビットを表すことです (2^ 6 == 64、したがって Base 64 )。したがって、合計ビット数を取得するには、持っている文字数を 6 倍します。次に、1 バイトは 8 ビットであるため、合計ビット数を 8 で割り、バイト数を取得します。

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

と同じMath.round(base64String.length * 3 / 4);です。