【初心者向け】JavaScriptで画像のURL（データURI）を取得する方法

HTMLページ上の画像タグをJavaScriptでデータURI（Data URI）に変換するには、まずcanvas要素を作成し、その幅と高さを対象の画像と同じサイズに設定します。続いてcanvas上に画像を描画し、最後にtoDataURL()メソッドを呼び出すことで、base64エンコードされたデータURIを取得できます。

変換の基本手順

1. document.createElement()でcanvas要素を作成する
2. 画像と同じ幅・高さをcanvasに設定する
3. drawImage()メソッドでcanvasに画像を描画する
4. toDataURL()を呼び出してデータURIを取得する

この処理により、画像はbase64エンコードされたデータURIとして取得できます。たとえば、id属性が「my-image」の画像がある場合は、次のように実装します。

コード例

function getDataUrl(img) {
   // canvas要素を作成
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   // 幅と高さを画像に合わせて設定
   canvas.width = img.width;
   canvas.height = img.height;
   // canvasに画像を描画
   ctx.drawImage(img, 0, 0);
   return canvas.toDataURL('image/jpeg');
}

// 対象の画像を取得
const img = document.querySelector('#my-image');

// 画像の読み込み完了時にデータURIを取得
img.addEventListener('load', function (event) {
   const dataUrl = getDataUrl(event.currentTarget);
   console.log(dataUrl);
});

実行結果

コンソールには、以下のような形式のデータURIが出力されます。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

補足：CORS制約とMIMEタイプについて

別ドメインの画像をcanvasに描画した場合、セキュリティ上の制限によりcanvasが「汚染」され、toDataURL()がエラーをスローすることがあります。外部画像を扱う際は、画像サーバー側でCORSヘッダーを許可し、img.crossOrigin = 'anonymous'を設定しておきましょう。また、toDataURL()の引数には'image/png'や'image/jpeg'などのMIMEタイプを指定でき、省略した場合はPNG形式で出力されます。