base64にエンコードされた画像から容量を取得する方法

Question

imgタグにbase64エンコードした画像を埋め込んだときに、ここから画像の容量を取得したいです。

        function base64ToBlob(base64) {
            var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
                data = window.atob(base64Data), // base64形式の文字列をデコード
                buff = new ArrayBuffer(data.length),
                arr = new Uint8Array(buff),
                blob,
                i,
                dataLen;
            // blobの生成
            for (i = 0, dataLen = data.length; i < dataLen; i++) {
                arr[i] = data.charCodeAt(i);
            }
            blob = new Blob([arr], {type: 'image/jpeg'});
            return blob;
        }

blobを生成して**.size**でサイズを取得しても、画像の容量ではなくblobそのものの容量が取得され期待値が得られません。

imgタグ内から画像のサイズを取得して分岐をさせたいです。よろしくお願い致します。

Comments

[maisumakun]

「画像の容量」と「blobそのものの容量」には、どのような違いがあるとお考えですか？

Answer 1

画像の容量ではなくblobそのものの容量が取得され

「Blobの容量」であれば、そこから生成される「画像ファイルの容量」と等しいはずです。

（Base64で展開された文字列のサイズは、データ量の約1.33倍になります）

Comments

[maisumakun]

バイト数という意味では、atobしたあとのdata.lengthも一致するはずです。

[maisumakun]

あと、new Blobの生成の際に、[arr]ではなく[arr.buffer]を指定する必要があるようです。

Answer 2

base64の文字列のlengthが容量です

Comments

[loggg]

base64の文字列を検索フォームにペーストし、表示した画像をダウンロードするとその容量がbase64のlenghtと違うのですがなぜでしょうか。
このダウンロードしたときの容量をダウンロードする前に知りたいです

[yambejp]

画像本体のファイルサイズを知りたいのですか？
そのへんうまく伝わってきてませんが・・・

[loggg]

> imgタグ内から画像のサイズを取得して分岐をさせたいです。

おっしゃるとおり画像本体のファイルサイズをbase64エンコードされた文字列から知りたいです。

[yambejp]

<img id="test" src="data:image/gif;base64,R0lGODlhEAAHAMIAAP8AAP/29v/6+v/8/P/9/f////8AAP8AACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAcALAAAAAAQAAcAAAMhCFoKxYBA55h4NeMyKnugNmGeI4ggM5zbtwUOITbkAxcJADs=">
<script>
var src=document.querySelector('#test').getAttribute("src");
console.log(src.length);
var type=src.match(/data:(.*);/)[1];
var asc=src.match(/base64,(.+$)/)[1];
var bin=atob(asc);
console.log(bin.length);
const buffer = new Uint8Array(bin.length);
const blob = new Blob([buffer.buffer], {type});
console.log(blob.size);
</script>