【Javascript】DataURLとBlobの相互変換

当記事では、DataURLからBlobに変換する方法とBlobからDataURLに変換する方法を記します。

DataURL⇒Blob
DataURL⇒Blobを関数化して使う
Blob⇒DataURL
Blob⇒DataURLの変換処理を関数化して使う

DataURL⇒Blob

DataURLからBlobに変換するにはfetchメソッドが便利だと思います。
thenメソッドの中で、取得したBlobに対する処理を行えます。

let dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHLkyH8AB+gDTOQq89IAAAAASUVORK5CYII="
fetch(dataUrl)
.then(response => response.blob())
.then(blob => {
    console.log(blob)    //Blobオブジェクト
})

DataURL⇒Blobを関数化して使う

上記のやり方ではthenメソッドの中にしか続きを書けないのですが、下記のように変換処理を関数にまとめることで取得結果をグローバル変数に入れることができます。

;(async function(){
    //何かしらの記述
    //何かしらの記述

    let dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHLkyH8AB+gDTOQq89IAAAAASUVORK5CYII="
    let blob = await url2Blob(dataUrl)

    //何かしらの記述
    //何かしらの記述
})()

async function url2Blob(url){
    return await (await fetch(url)).blob()
}

fetchメソッドは非同期処理なので取得結果をグローバル変数に入れるにはasync/awaitを使う必要があります。詳しくは下記で解説しております。
【Javascript】Fetch Apiの取得結果を変数に入れる

Blob⇒DataURL

BlobからDataURLに変換するにはFileReaderが便利だと思います。
onloadイベントの中で、取得したDataURLに対する処理を行えます。

let blob = new Blob(['hoge'],{type: 'image/png'})
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function(){
    dataUrl = reader.result
    console.log(dataUrl)    //DataURL
}

Blob⇒DataURLの変換処理を関数化して使う

上記のやり方ではonloadイベントの中にしか続きを書けないのですが、下記のように変換処理を関数にまとめることで取得結果をグローバル変数に入れることができます。

;(async function(){
    //何かしらの記述
    //何かしらの記述

    let blob = new Blob(['hoge'],{type: 'image/png'})
    let dataUrl = await convert2DataUrl(blob)

    //何かしらの記述
    //何かしらの記述
})()


async function convert2DataUrl(blobOrFile){
    let reader = new FileReader()
    reader.readAsDataURL(blobOrFile)
    await new Promise(resolve => reader.onload = function(){ resolve() })
    return reader.result
}

FileReaderは非同期処理なので取得結果をグローバル変数に入れるにはasync/awaitを使う必要があります。Promiseも使用していて少しややこしいですが、詳しくは下記で解説しております。
【Javascript】FileReaderの取得結果を変数に入れる

以上、DataURLとBlobを相互変換する方法でした。