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 图片验证器检验结果.