Convertisseur Base64 en image

Convertissez les chaînes Base64 en images avec un aperçu en direct instantané, téléchargez-les au format PNG, JPG ou WebP, ou copiez l'image directement dans votre presse-papiers. Convertit dans les deux sens : Base64 en Image et Image en Base64.

Base64 String or Data URI

Exemple Effacer

0 caractères Téléchargez le fichier .txt avec Base64

Image Preview

Download Copiez l'image

Collez une chaîne Base64 à gauche pour afficher l'aperçu

Taille : - Format : - Taille des données : - Rapport : -

Copiez l'URI des données Copiez la balise Copiez le CSS

Faites glisser et déposez une image ici ou cliquez pour parcourir

Supporte PNG, JPG/JPEG, WebP, GIF, SVG, BMP, ICO (maximum 25 Mo)

Aperçu de l'image téléchargée Télécharger un autre

fichier : - Dim : - Original : - Base64 : -

Sortie Base64 générée

Copier Base64 Télécharger .txt

Copier Base64 brute Copiez l'URI des données Copiez la balise Copiez le CSS

Qu'est-ce que la conversion Base64 en image ?

Base64 est un mécanisme de codage binaire-texte standard défini par la RFC 4648. It takes binary data—such as image bytes representing PNG, JPEG, SVG, WebP, or GIF files—and translates it into a string of ASCII characters using a set of 64 characters (A-Z, a-z, 0-9, +, /, with = for padding).

La conversion Base64 en image décode cette représentation textuelle en graphiques binaires que les navigateurs, les systèmes d'exploitation et les visionneuses d'images peuvent afficher et enregistrer. En incorporant des images sous forme d'URI de données Base64 directement dans HTML, CSS, JSON ou dans des messages électroniques, les développeurs peut éliminer les requêtes HTTP externes et regrouper les images en ligne.

La structure d'un URI de données d'image

Une chaîne d'image Base64 standard est formatée sous la forme d'une URL de données:

• data: — L'identifiant du schéma URI
• image/png, image/jpeg, image/webp, image/svg+xml — La définition du type MIME. le format.
• ;base64, — Indique que les données utiles sont codées en Base64
• <data> — Les octets binaires codés en Base64 du fichier image

Comment convertir Base64 en image dans le code

Besoin de décoder Base64 en image dans votre application ? Voici des extraits de code prêts à l'emploi dans les langages de programmation courants :

1. JavaScript (navigateur)

// Convert Base64 string to an HTMLImageElement
function base64ToImage(base64String) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = base64String.startsWith('data:') 
            ? base64String 
            : `data:image/png;base64,${base64String}`;
    });
}

// Convert Base64 string to a Blob for download or uploading
function base64ToBlob(base64String, mimeType = 'image/png') {
    const raw = base64String.replace(/^data:[^;]+;base64,/, '');
    const byteCharacters = atob(raw);
    const byteNumbers = new Uint8Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    return new Blob([byteNumbers], { type: mimeType });
}

2. Node.js

const fs = require('fs');

function saveBase64Image(base64String, outputPath) {
    // Strip data URI prefix if present
    const base64Data = base64String.replace(/^data:image\/\w+;base64,/, '');
    const buffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync(outputPath, buffer);
    console.log(`Saved image to ${outputPath}`);
}

3. Python 3

import base64
import re

def base64_to_image(b64_string, output_filename='output.png'):
    # Remove data:image/...;base64, header if present
    data = re.sub('^data:image/.+;base64,', '', b64_string)
    image_bytes = base64.b64decode(data)
    with open(output_filename, 'wb') as f:
        f.write(image_bytes)

# Usage
base64_to_image("iVBORw0KGgo...", "photo.png")

4. PHP

<?php
function base64ToImage($base64String, $outputFile) {
    $data = explode(',', $base64String);
    $binaryData = base64_decode(end($data));
    file_put_contents($outputFile, $binaryData);
}
?>

Cas d'utilisation courants

Foire aux questions (FAQ)