JavaScriptでHTMLページ上の画像をデータURIに変換する方法

Web開発では、ページ上の画像をデータURI(Base64エンコードされた文字列)に変換したい場面があります。例えば、画像をそのままHTMLやCSSに埋め込んだり、サーバーへのリクエストを減らしたりするケースです。

JavaScriptを使ってHTMLページ内の<img>タグの画像をデータURIに変換するには、以下の手順を実行します。

1. canvas要素を作成する
2. canvasの幅と高さを対象の画像と同じサイズに設定する
3. canvas上に画像を描画する
4. toDataURL()メソッドを呼び出す

基本的な仕組み

toDataURL()メソッドは、canvasに描画された内容をBase64エンコードされたデータURIとして返します。引数にMIMEタイプ(例:'image/jpeg'や'image/png')を指定することで、出力形式を選択できます。指定しない場合はデフォルトでPNG形式になります。

実装例

例えば、idが「my-image」である画像要素がある場合、次のようなコードでデータURIを取得できます。

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');
img.addEventListener('load', function (event) {
    const dataUrl = getDataUrl(event.currentTarget);
    console.log(dataUrl);
});

このコードのポイントは、loadイベントリスナーを使っている点です。画像が完全に読み込まれていない状態で描画すると、空のcanvasになってしまうため、必ず画像の読み込み完了後に変換処理を実行しましょう。

出力結果

このコードを実行すると、コンソールに次のような形式のデータURIが出力されます。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

注意点

• CORS制限: 別ドメインから読み込んだ画像の場合、サーバー側で適切なCORSヘッダーが設定されていないと、canvasが汚染(tainted)され、toDataURL()がセキュリティエラーをスローします。その場合は、画像にcrossorigin="anonymous"属性を設定してください。
• ファイルサイズ: Base64エンコードにより、元の画像より約33%ほどサイズが大きくなります。大きな画像には不向きな場合があります。
• 画質の劣化: 'image/jpeg'を指定した場合、第2引数で品質(0〜1)を指定できます。例:canvas.toDataURL('image/jpeg', 0.8)

この手法を活用すれば、画像のプレビュー表示、クライアントサイドでの画像アップロード、CSSへのインライン埋め込みなど、さまざまな用途に対応できます。