Convertidor de Base64 a imagen

Convierta cadenas Base64 en imágenes con vista previa instantánea en vivo, descárguelas como PNG, JPG o WebP, o copie la imagen directamente a su portapapeles. Convierte en ambos sentidos: Base64 a imagen e imagen a Base64.

Base64 String or Data URI

Muestra Borrar

0 caracteres Cargar .txt con Base64

Image Preview

Download Copiar imagen

Pegar una cadena Base64 a la izquierda para mostrar la vista previa

Tamaño: - Formato: - Tamaño de datos: - Relación: -

Copiar URI de datos Copiar etiqueta Copiar CSS

Arrastre y suelte una imagen aquí, o haga clic para explorar

Admite PNG, JPG/JPEG, WebP, GIF, SVG, BMP, ICO (máx. 25 MB)

Vista previa de la imagen cargada Cargar otro

archivo: - Dim: - Original: - Base64: -

Salida Base64 generada

Copiar Base64 Descargar .txt

Copiar Base64 sin formato Copiar URI de datos Copiar etiqueta Copiar CSS

¿Qué es la conversión de Base64 a imagen?

Base64 es un mecanismo de codificación estándar de binario a texto definido por 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 conversión Base64 a imagen decodifica esta representación de texto nuevamente en gráficos binarios que los navegadores, los sistemas operativos y los visores de imágenes pueden mostrar y guardar. Al incorporar imágenes como URI de datos Base64 directamente en HTML, CSS, JSON o correo electrónico mensajes, los desarrolladores pueden eliminar solicitudes HTTP externas y agrupar imágenes en línea

La estructura de un URI de datos de imagen

Una cadena de imagen Base64 estándar está formateada como URL de datos:

• data: : el identificador de esquema de URI
• image/png, image/jpeg, image/webp, image/svg+xml . — El tipo MIME que define el formato.
• ;base64, — Indica que los datos de carga útil están codificados en Base64.
• <data> — Los bytes binarios codificados en Base64 del archivo de imagen.

Cómo convertir Base64 en una imagen en código

¿Necesita decodificar Base64 en una imagen en su aplicación? (Navegador)

Copiar

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

3. Python 3

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

4. PHP

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

Casos de uso comunes

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

🚀 Rendimiento web y CSS crítico

¿Por qué una imagen Base64 es un 33 % más grande que el archivo binario original?