Base64画像のコード例

ファイルからData URLへ

ブラウザのファイル入力から画像を取得する場合はFileReaderを使います。

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

Data URLからBlobへ

ダウンロード可能なBlobが必要なとき、Data URLをバイト列へデコードします。

function dataUrlToBlob(dataUrl) {
  const [header, payload] = dataUrl.split(',');
  const mime = header.match(/data:([^;]+)/)[1];
  const binary = atob(payload);
  const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
  return new Blob([bytes], { type: mime });
}

Reactファイル入力

ローカルプレビューやリクエストデータ用にData URLをコンポーネントの状態へ保存します。

import { useState } from 'react';

export function ImagePicker() {
  const [dataUrl, setDataUrl] = useState('');

  function selectImage(event) {
    const file = event.target.files[0];
    if (!file?.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = () => setDataUrl(String(reader.result));
    reader.readAsDataURL(file);
  }

  return <>
    <input type="file" accept="image/*" onChange={selectImage} />
    {dataUrl && <img src={dataUrl} alt="Local preview" />}
  </>;
}

Node.js Buffer

信頼できるローカル画像のバイト列をNode.jsでエンコードし、MIME形式を明示します。

import { readFile } from 'node:fs/promises';

const bytes = await readFile('./image.png');
const base64 = bytes.toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;

const restored = Buffer.from(base64, 'base64');

Python

追加パッケージなしで標準ライブラリからBase64を生成・デコードします。

from base64 import b64decode, b64encode
from pathlib import Path

encoded = b64encode(Path("image.png").read_bytes()).decode("ascii")
data_url = f"data:image/png;base64,{encoded}"

Path("restored.png").write_bytes(b64decode(encoded, validate=True))

URL-safe Base64

URLやファイル名で値を使う場合は標準の文字体系を置き換えます。

function toUrlSafeBase64(base64, keepPadding = false) {
  const result = base64.replace(/\+/g, '-').replace(/\//g, '_');
  return keepPadding ? result : result.replace(/=+$/, '');
}

function fromUrlSafeBase64(value) {
  const standard = value.replace(/-/g, '+').replace(/_/g, '/');
  return standard.padEnd(Math.ceil(standard.length / 4) * 4, '=');
}

OpenAI Chat Completionsの画像入力

Data URLをimage_url項目に指定します。APIキーを公開しないよう、信頼できるバックエンドからリクエストを送ります。

const body = {
  model: 'gpt-4.1-mini',
  messages: [{
    role: 'user',
    content: [
      { type: 'text', text: 'Describe this image.' },
      { type: 'image_url', image_url: { url: dataUrl, detail: 'auto' } }
    ]
  }]
};

OpenAI Responses APIの画像入力

Responses APIでは、テキストとともにinput_image項目を使います。

const body = {
  model: 'gpt-4.1-mini',
  input: [{
    role: 'user',
    content: [
      { type: 'input_text', text: 'Describe this image.' },
      { type: 'input_image', image_url: dataUrl, detail: 'auto' }
    ]
  }]
};

Base64画像検証ツールで結果を確認.