【Javascript】DataURLとFileの相互変換を同期的に行う

dataurl and file


当記事ではDataURLからFileへの変換とFileからDataURLへの変換を同期的に行う方法について記します。



DataURL⇒File

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


function dataUrl2File(dataUrl, fileName) {
    const str = atob(dataUrl.split(',')[1])
    const type = dataUrl.match(/:([a-z\/\-]+);/)[1]
    const buffer = new Uint8Array(str.split('').map(c => c.charCodeAt(0))).buffer
    return new File([buffer], fileName, {type: type})
}    





File⇒DataURL

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


function convert2DataUrl(fileOrBlob){
    const url = URL.createObjectURL(fileOrBlob)
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, false)
    xhr.overrideMimeType('text/plain; charset=x-user-defined')
    xhr.send()
    URL.revokeObjectURL(url)
    const data = xhr.responseText.split('').map(c => String.fromCharCode(c.charCodeAt(0)&0xff)).join('')
    return `data:${fileOrBlob.type};base64,` + btoa(data)
}






以上、DataURLとFileの相互変換を同期的に行う方法でした。

スポンサーリンク

レバテックキャリアの広告画像

You can subscribe by SNS

スポンサーリンク

コメントを残す

*