JavaScriptでのデータURIの操作

JavaScriptデータURI API

JavaScriptはデータURIを操作するための複数のネイティブAPIを提供します：ファイルから生成するFileReader、グラフィックから作成するCanvas、データURIとBlob間を変換するFetch API。

ファイルからデータURIを生成

function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

CanvasからデータURIを生成

const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3b82f6';
ctx.fillRect(0, 0, 100, 100);
const dataUri = canvas.toDataURL('image/png');

データURIをBlobに変換

async function dataUriToBlob(dataUri) {
  const response = await fetch(dataUri);
  return response.blob();
}

データURIのダウンロード

function downloadDataUri(dataUri, filename) {
  const link = document.createElement('a');
  link.href = dataUri;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}