[JavaScript]Fetch APIを使えばData URIからBlobに簡単に変換できるという話

Base64のDataURIをBlobに変換したいということがたまにあります。ただ、これが一筋縄ではいきません。Uint8Arrayのオブジェクトを生成して、バイトの配列に変換し、ループで一文字ずつ解析していくということをやらなければいけない。
そのため、やり方を全く覚えることができず、いつもググっています。今日、また必要になったのでググったら下記のページを見つけました。
Creating a BLOB from a Base64 string in JavaScript – Stack Overflow

そうそう。Uint8Arrayのオブジェクトを生成して、バイトの配列を作るんだよね……、とみていったら他のやり方を書いた回答がありました。それが下記。

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(console.log)

！！！！

その手があったかと衝撃的でした。fetchで取得したファイルをBlobとして取得する方法があるというのは知っていたのですが、fetchにData URIをいれる発想がなく、自分では思いつきませんでした。

下記、簡単なサンプルです。Base64形式の画像のData URIをBlob形式にしています。

See the Pen
Untitled by amano225 (@amano225)
on CodePen.

asyncを指定した関数内で呼び出すなら、下記のような指定もできます。

async function setBlob(data_uri){
    const blob = await (await fetch(data_uri)).blob();
    const blob_uri = URL.createObjectURL(blob);
    // Blob URIの設定
    document.getElementById('blob_a').href = blob_uri;
    document.getElementById('blob_img').src = blob_uri;
}

Uint8Arrayを生成して…、というやり方と比べると非同期だったりIEに対応していないという違いはあるのですが、今年の6月にIE11がサポート終了するなか、IEの対応が必要ということも少なくなるでしょうし、非同期ということがそうそう影響うけるとも思えないので、今後はこのやり方で実装していこうと思います。