[Javascript]Synchronously converting between DataURL and File

dataurl and file


In this article, we will discuss how to perform synchronous conversion from DataURL to File and from File to DataURL.



DataURL to 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 to 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)
}






That is all, it was about how to perform synchronous conversion from DataURL to File and from File to DataURL.

Sponsored Link

You can subscribe by SNS

Sponcerd Link

Leave a Reply

*