JavaScriptで画像をBase64データURLに変換する方法を解説

HTMLページ上のタグで表示されている画像を、JavaScriptを使ってデータURI（Data URL）に変換するには、まず要素を作成し、その幅と高さを画像のサイズに合わせます。次にキャンバス上に画像を描画し、最後にtoDataURL()メソッドを呼び出します。

このメソッドは、画像をBase64エンコードしたデータURIを文字列として返します。取得したデータURIは、そのままタグのsrc属性に指定したり、CSSのbackground-imageとして利用したり、サーバーへ送信したりすることが可能です。

例えば、idが「my-image」の画像を変換する場合は、以下のように実装します。

コード例

function getDataUrl(img) {
    // キャンバスを作成
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 幅と高さを設定
    canvas.width = img.width;
    canvas.height = img.height;
    // 画像を描画
    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);
});

実行結果

このコードを実行すると、コンソールには以下のような形式の文字列が出力されます。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

実装時のポイントと注意点

• 出力形式の指定：toDataURL()の引数には「image/jpeg」「image/png」「image/webp」などを指定でき、出力されるデータURIの形式を選択できます。引数を省略した場合のデフォルトはPNGです。
• 読み込み完了を待つ：画像の読み込みが完了する前に描画すると空の画像になってしまうため、上記のコードではloadイベントを待ってから変換処理を実行しています。
• CORSに注意：別ドメインの画像をキャンバスに描画する場合、サーバー側でCORS（オリジン間リソース共有）が許可されていないと、キャンバスが「汚染（tainted）」された状態になり、toDataURL()がセキュリティエラーをスローします。その場合は、画像にcrossOrigin="anonymous"属性を設定するなどの対応が必要です。