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のサイズの実際の大きさではありません。 Base64エンコーディングは4/3のオーバーヘッドを持っているので

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

：あなたは非常に正確に、実際のP​​NGのサイズに、このように近似することができます。

編集：コメント後のサイズ計算を修正しました。

正確ペドロのソリューションは、私がやったことは

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

canvas.toBlobは、この時点でワーキングドラフトでファイルサイズを取得し、その後、キャンバスの外にBLOBを作成し、したことが

Answer 2

私は見つけられませんでしたが、私はcanvas.mozGetAsFileでも仕事ができるが、私はテストしていませんそれについて考えるために

Answer 3

最良の方法は、各文字は、6ビット（2^== 64を、表していることだと思うpollyfill

を使用しましたそれゆえにベース）。あなたが持っているcharsの量を合計すると、合計ビット数が6になります。次に、バイトが8ビットであるため、合計ビット数を8で割ってバイト数を取得します。 Math.round(base64String.length * 3/4);と同じである

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

。