【Javascript】DataURLとFileの相互変換

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

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

DataURL⇒File

DataURLからFileへの変換はfetchメソッドとFile Apiを組み合わせることで実現できます。
fetchメソッドで一度Blobに変換しそれをFile ApiでFileに変換するという流れになります。

thenメソッドの中で変換したFileに対しての処理を行えます。

const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHLkyH8AB+gDTOQq89IAAAAASUVORK5CYII="
fetch(dataUrl)
.then(response => response.blob())
.then(blob => {
    const file = new File([blob], "sample.png", {type: blob.type})
    console.log(file)    //Fileオブジェクト
})

DataURL⇒Fileを関数化して使う

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

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

    const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHLkyH8AB+gDTOQq89IAAAAASUVORK5CYII="
    const file = await url2File(dataUrl, 'smaple.png')

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

async function url2File(url, fileName){
    const blob = await (await fetch(url)).blob()
    return new File([blob], fileName, {type: blob.type})
}

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

File⇒DataURL

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

const file = new File(["hoge"], "sample.png", {type: 'image/png'})
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(){
    const dataUrl = reader.result
    console.log(dataUrl)    //DataURL
}

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

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

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

    const file = new File(["hoge"], "sample.png", {type: 'image/png'})
    const dataUrl = await convert2DataUrl(file)

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

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

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

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