Конвертер Base64 в изображения

Преобразуйте строки Base64 в изображения с мгновенным предварительным просмотром в реальном времени, загружайте в формате PNG, JPG или WebP или копируйте изображение напрямую в буфер обмена. Преобразует оба способа — Base64 в изображение и изображение в Base64.

Base64 String or Data URI

Образец Очистить

0 символов Загрузить .txt с помощью Base64

Image Preview

Download Копировать изображение

Вставить строку Base64 слева для предварительного просмотра

Размер: - Формат: - Размер данных: - Соотношение: -

Копировать URI данных Копировать Тег Копировать CSS

Перетащите изображение сюда или щелкните для просмотра

Поддерживается PNG, JPG/JPEG, WebP, GIF, SVG, BMP, ICO (макс. 25 МБ)

Предварительный просмотр загруженного изображения Загрузить другой

файл: - Тусклый: - Оригинал: - Base64: -

Сгенерированный вывод Base64

Скопировать Base64 Загрузить .txt

Скопировать необработанный Base64 Копировать URI данных Копировать Тег Копировать CSS

Что такое преобразование Base64 в изображение?

Base64 — это стандартный механизм кодирования двоичного текста в текст, определенный 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).

Преобразование Base64 в изображение декодирует это текстовое представление обратно в двоичную графику, которую браузеры, операционные системы и средства просмотра изображений могут отображать и сохранять. Путем встраивания изображений в виде URI данных Base64 непосредственно в HTML, CSS, JSON, или сообщений электронной почты, разработчики могут исключить внешние HTTP-запросы и объединить изображения в встроенном виде

Структура URI данных изображения

Стандартная строка изображения Base64 форматируется как URL-адрес данных:

• data: — Идентификатор схемы URI
• image/png, image/jpeg, image/webp, image/svg+xml — Тип MIME, определяющий формат.
• ;base64, — Указывает, что полезные данные закодированы в Base64.
• <data> — Двоичные байты файла изображения в кодировке Base64.

Как преобразовать Base64 в изображение в коде

Необходимо декодировать Base64 в изображение в вашем приложении. Вот готовые фрагменты кода для распространенных языков программирования:

1. JavaScript. (Браузер)

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

Общие случаи использования

Часто задаваемые вопросы (FAQ)