Web ブラウザで文字列を Data URL に変換する

備忘録。

ASCII 文字のみの場合

function stringToDataURL(str) {
  return "data:text/plain;base64, " + btoa(str)
}

stringToDataURL("Hello, World!") //=> "data:text/plain;base64, SGVsbG8sIFdvcmxkIQ=="

(2023.01.12 追記) マルチバイト文字を含む場合

btoa を使うやり方だとマルチバイト文字が含まれている場合にエラーが出てしまうとコメントでご指摘いただいた。その場合は Blob に変換してから FileReader の readAsDataURL を使ったほうが良さそう。(こちらは非同期関数になるが)

function stringToDataURL(str, type = 'text/plain;charset=utf-8') {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.addEventListener('load', () => resolve(fileReader.result))
    fileReader.addEventListener('error', () => reject(fileReader.error))
    fileReader.readAsDataURL(new Blob([str], { type }))
  })
}

const dataUrl = await stringToDataURL("あいうえお") //=> "data:text/plain;base64,44GC44GE44GG44GI44GK"