Exemples de code pour images Base64

Fichier vers Data URL

Utilisez FileReader lorsque l’image provient d’un sélecteur de fichiers du navigateur.

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

Décodez une Data URL en octets lorsque vous avez besoin d’un Blob téléchargeable.

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 });
}

Sélecteur de fichier React

Conservez la Data URL dans l’état du composant pour un aperçu local ou les données d’une requête.

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" />}
  </>;
}

Buffer Node.js

Encodez des octets d’image locaux fiables dans Node.js et indiquez explicitement le type 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

Utilisez la bibliothèque standard pour produire ou décoder du Base64 sans paquet supplémentaire.

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

Base64 compatible URL

Remplacez l’alphabet standard lorsque la valeur doit être placée dans une URL ou un nom de fichier.

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

Image avec OpenAI Chat Completions

Placez la Data URL dans un élément image_url. Envoyez les requêtes API depuis un serveur fiable pour ne pas exposer la clé.

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

Image avec l’API OpenAI Responses

Dans l’API Responses, utilisez un élément input_image avec le texte de la requête.

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

Testez le résultat avec le validateur d’image Base64.