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の対応が必要ということも少なくなるでしょうし、非同期ということがそうそう影響うけるとも思えないので、今後はこのやり方で実装していこうと思います。
コメント