Codebeispiele für Base64-Bilder

Datei zu Data URL

FileReader verwenden, wenn das Bild aus einer Dateiauswahl im Browser stammt.

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 zu Blob

Eine Data URL in Bytes dekodieren, wenn ein herunterladbarer Blob benötigt wird.

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-Dateiauswahl

Die Data URL für eine lokale Vorschau oder Anfragedaten im Komponentenstatus speichern.

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

Vertrauenswürdige lokale Bildbytes in Node.js kodieren und den MIME-Typ ausdrücklich angeben.

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 mit der Standardbibliothek ohne zusätzliche Pakete erzeugen oder dekodieren.

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-sicheres Base64

Das Standardalphabet ersetzen, wenn der Wert in einer URL oder einem Dateinamen verwendet wird.

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, '=');
}

Bildeingabe für OpenAI Chat Completions

Die Data URL in ein image_url-Element einfügen. API-Anfragen von einem vertrauenswürdigen Backend senden, damit der Schlüssel geschützt bleibt.

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' } }
    ]
  }]
};

Bildeingabe für die OpenAI Responses API

In der Responses API ein input_image-Element zusammen mit dem Text verwenden.

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' }
    ]
  }]
};

Das Ergebnis mit dem Base64-Bildprüfer testen.