Base64 na obraz

Wejście Base640 Znaki

Konwertuj kodowanie Base64 na podglądany obraz do pobrania, obsługuje PNG/JPG/WebP/GIF/SVG i inne 7+ popularnych formatów obrazów. Automatyczne wykrywanie prefiksu Data URL, bezpośredni podgląd w przeglądarce, idealne do debugowania interfejsów i weryfikacji kodowania.

Powiązane Rekomendacje

Czym jest konwersja Base64 na obraz?

Konwersja Base64 na obraz to proces odwrotny do kodowania Base64: przywraca ciąg zakodowany w Base64 do oryginalnych binarnych danych obrazu (formaty PNG/JPG/WebP/GIF/SVG itp.) i wyświetla podgląd bezpośrednio w przeglądarce lub umożliwia pobranie jako lokalny plik graficzny. To niezbędne narzędzie do obsługi obrazów zwracanych przez API, zasobów inline (Data URL), załączników pocztowych w formacie Base64 i innych scenariuszy.

**Główna zasada działania:** Base64 koduje dane binarne na 64 drukowalne znaki ASCII (A-Z, a-z, 0-9, +, /). Konwersja na obraz polega na przywróceniu tego ciągu ASCII z powrotem do oryginalnego strumienia bajtów binarnych, który następnie jest interpretowany przez przeglądarkę jako piksele obrazu zgodnie z określonym typem MIME (np. image/png). Data URL (np. `data:image/png;base64,iVBORw0KGgo...`) to forma kombinacji Base64 + prefiksu MIME, narzędzie automatycznie ją rozpoznaje i przetwarza.

**Typowe scenariusze użycia:** ①Debugowanie API: wiele API zwraca kody CAPTCHA, awatary użytkowników, podpisy elektroniczne bezpośrednio jako ciągi Base64, frontend musi je odzyskać do wyświetlenia; ②Rozwój frontend: małe ikony osadzone jako Data URL (CSS background-image: url(data:image/png;base64,...)) można wkleić do narzędzia, aby zobaczyć rzeczywisty efekt; ③Odzyskiwanie załączników pocztowych: załączniki zakodowane w MIME Base64 można zdekodować z powrotem na oryginalny obraz i zapisać; ④Dane ze scraperów: obrazy Base64 pobrane ze stron można zdekodować i zapisać jako pliki lokalne; ⑤Przetwarzanie wstępne OCR: zdekoduj, a następnie użyj narzędzi OCR do rozpoznania zawartości obrazu.

**Obsługiwane formaty obrazów:** narzędzie obsługuje wszystkie typy MIME obrazów rozpoznawane natywnie przez przeglądarki: PNG (image/png), JPG/JPEG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), AVIF (image/avif), ICO (image/x-icon) itp. Każdy format ma inne algorytmy kompresji i zastosowania: PNG bezstratny nadaje się do ikon i zrzutów ekranu, JPG stratny do zdjęć, WebP jest zalecany dla nowoczesnych przeglądarek, SVG wektorowy do ikon i logo.

**Bezpieczeństwo dekodowania:** wszystkie operacje dekodowania są wykonywane w przeglądarce za pomocą JavaScript (oparte na `atob()` + `TextDecoder` lub API `Blob`), binarne dane obrazu nie są wysyłane na żaden serwer. Ciągi Base64 zawierające wrażliwe informacje (np. awatary użytkowników, wewnętrzne zrzuty ekranu) można bezpiecznie używać, wszystkie dane są automatycznie usuwane po zamknięciu strony.

Przypadki użycia

  • Przywracanie danych obrazu Base64 zwracanych przez API do plików graficznych z możliwością podglądu i pobierania
  • Weryfikacja poprawności kodowania inline zasobów obrazów frontend (format Data URL)
  • Potwierdzanie kompletności zawartości Base64 podczas debugowania interfejsów uploadu obrazów
  • Zapisywanie obrazów Base64 jako lokalnych plików PNG/JPG do projektowania lub dokumentacji
  • Dekodowanie Base64 załączników pocztowych w celu przywrócenia obrazów
  • Przywracanie i zapisywanie obrazów Base64 pobranych przez scrapery na dysk
  • Dekodowanie Data URL w celu weryfikacji rzeczywistego renderowania ikon SVG
  • Przywracanie obrazów Base64 zwracanych przez interfejsy OCR/AI do lokalnych plików do przeglądania

Jak Używać

  1. Wklej zakodowane dane obrazu Base64 (obsługiwane z lub bez prefiksu Data URL, np. data:image/png;base64,iVBORw0KG...)
  2. Narzędzie automatycznie wykrywa typ MIME i dekoduje (rozpoznaje w Data URL lub wykrywa na podstawie nagłówka zawartości)
  3. Po prawej stronie w czasie rzeczywistym wyświetla się podgląd obrazu oraz informacje o rozmiarze pliku i wymiarach
  4. Kliknij "Pobierz", aby zapisać jako lokalny plik obrazu, lub kliknij prawym przyciskiem myszy na obrazie "Zapisz obraz jako"
  5. Jeśli dekodowanie się nie powiedzie, możesz ręcznie określić typ MIME lub użyć narzędzia Base64 Clean do wstępnego przetworzenia

Funkcje

  • Podgląd obrazu online: po dekodowaniu obraz jest wyświetlany bezpośrednio w przeglądarce, bez konieczności pobierania na dysk
  • Obsługa wielu formatów: obsługuje PNG/JPG/WebP/GIF/SVG/BMP/AVIF i inne 7+ popularnych typów MIME obrazów
  • Automatyczne wykrywanie Data URL: automatycznie usuwa prefiks data:image/png;base64, i dekoduje czystą zawartość Base64
  • Wejście czystego Base64: obsługuje ciągi Base64 bez prefiksu, można określić typ MIME
  • Pobieranie pliku obrazu: obsługuje jedno-klikowe zapisanie zdekodowanego obrazu jako lokalny plik PNG/JPG
  • Liczenie znaków w czasie rzeczywistym: wyświetla liczbę znaków wejściowych i liczbę bajtów po dekodowaniu w czasie rzeczywistym, ułatwia ocenę rozmiaru obrazu
  • Wykrywanie błędów: w przypadku niepowodzenia dekodowania wyświetla konkretną lokalizację błędu (nieprawidłowe znaki Base64, nieprawidłowa długość, niezgodność MIME)
  • Lokalne przetwarzanie w przeglądarce bez uploadu: całe dekodowanie i podgląd odbywa się w przeglądarce, bez przechodzenia przez żaden serwer
  • Pełna kompatybilność odwrotna: współpracuje z narzędziem "Obraz na Base64", tworząc kompletny dwukierunkowy przepływ pracy konwersji

Przykłady kodu

JavaScript: natywne dekodowanie w przeglądarce + podgląd Blob URL

javascript

Użyj natywnych API przeglądarki atob() + TextDecoder + Blob, aby zdekodować Base64 i wyświetlić obraz w przeglądarce.

// Base64 → obraz (implementacja natywna w przeglądarce)
function base64ToImage(base64String, mimeType = 'image/png') {
  // 1. Usuń prefiks Data URL (jeśli istnieje)
  const clean = base64String.replace(/^data:image\/\w+;base64,/, '');

  // 2. Natywna funkcja przeglądarki atob() dekoduje na ciąg binarny
  const binary = atob(clean);

  // 3. Konwertuj na Uint8Array
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // 4. Utwórz Blob URL do podglądu w tagu <img>
  const blob = new Blob([bytes], { type: mimeType });
  const url = URL.createObjectURL(blob);

  // 5. Ustaw img.src, aby wyświetlić podgląd
  const img = document.createElement('img');
  img.src = url;
  img.onload = () => {
    console.log(`Wymiary obrazu: ${img.width}x${img.height}`);
    console.log(`Rozmiar pliku: ${bytes.byteLength} bajtów`);
  };

  return { img, url, size: bytes.byteLength };
}

// Przykład użycia:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);

// Zwolnij Blob URL (aby uniknąć wycieków pamięci)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);

Python: dekodowanie za pomocą biblioteki base64 i zapisywanie obrazu

python

Standardowa biblioteka Pythona base64 dekoduje dane Base64 na binarny strumień obrazu, następnie zapisuje za pomocą PIL/Pillow lub wbudowanych operacji na plikach.

import base64
from pathlib import Path

def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
    """Dekoduj ciąg Base64 i zapisz jako plik obrazu"""

    # 1. Usuń prefiks Data URL
    if base64_string.startswith('data:image'):
        # Format: data:image/png;base64,iVBORw0...
        header, base64_string = base64_string.split(',', 1)
        # Automatycznie wyodrębnij MIME z nagłówka
        if 'image/' in header:
            mime_type = header.split('data:')[1].split(';')[0]

    # 2. Dekoduj
    image_bytes = base64.b64decode(base64_string)

    # 3. Zapisz do pliku
    output_file = Path(output_path)
    output_file.parent.mkdir(parents=True, exist_ok=True)
    output_file.write_bytes(image_bytes)

    print(f"✅ Zapisano: {output_file}")
    print(f"   Rozmiar pliku: {len(image_bytes):,} bajtów")
    print(f"   Typ MIME: {mime_type}")

    return output_file


# Przykład użycia:
# 1. Ciąg Base64 pobrany z odpowiedzi API
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."

# 2. Dekoduj i zapisz
base64_to_image(api_base64_response, 'output/captcha.png')

# 3. Opcjonalnie: dalsze przetwarzanie za pomocą PIL
try:
    from PIL import Image
    img = Image.open('output/captcha.png')
    print(f"Wymiary obrazu: {img.size}")
    img.save('output/captcha.png', optimize=True)
except ImportError:
    print('Zainstaluj Pillow do obsługi obrazów: pip install Pillow')

Java: dekodowanie obrazu za pomocą java.util.Base64 + ImageIO

java

Standardowa biblioteka Javy Base64 dekoduje binarny strumień obrazu, współpracuje z ImageIO/BufferedImage do obsługi metadanych obrazu.

import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;

public class Base64ToImage {
    public static void main(String[] args) throws Exception {
        String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
        String mimeType = "image/png";

        // 1. Usuń prefiks Data URL (jeśli istnieje)
        if (base64String.startsWith("data:image")) {
            int commaIdx = base64String.indexOf(',');
            String header = base64String.substring(0, commaIdx);
            base64String = base64String.substring(commaIdx + 1);
            // Wyodrębnij MIME z nagłówka
            if (header.contains("image/")) {
                mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
            }
        }

        // 2. Dekodowanie Base64
        byte[] imageBytes = Base64.getDecoder().decode(base64String);

        // 3. Zapisz do pliku
        String extension = mimeType.substring("image/".length());
        File outputFile = new File("output." + extension);
        try (FileOutputStream fos = new FileOutputStream(outputFile)) {
            fos.write(imageBytes);
        }
        System.out.println("✅ Zapisano: " + outputFile.getAbsolutePath());
        System.out.println("   Rozmiar pliku: " + imageBytes.length + " bajtów");

        // 4. (Opcjonalnie) Odczytaj metadane obrazu
        ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
        BufferedImage image = ImageIO.read(bais);
        if (image != null) {
            System.out.println("Wymiary obrazu: " + image.getWidth() + "x" + image.getHeight());
        }
    }
}

Często Zadawane Pytania

Jakie formaty obrazów są obsługiwane?

Obsługiwane są PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO i wszystkie inne typy MIME obrazów rozpoznawane natywnie przez przeglądarki. Narzędzie automatycznie określa typ na podstawie prefiksu MIME w Data URL lub cech wejściowych, można również ręcznie określić typ MIME w interfejsie. Wybranie prawidłowego formatu zapewnia poprawne dekodowanie i wyświetlanie przez przeglądarkę.

Czy wejście wymaga prefiksu data:image/png;base64?

Nie. Narzędzie obsługuje dwa formaty wejścia: ①czysty ciąg Base64 (np. iVBORw0KGgoAA...), wymaga wybrania typu MIME w interfejsie (np. PNG/JPG); ②format Data URL (np. data:image/png;base64,iVBORw0KGgo...), narzędzie automatycznie rozpoznaje typ MIME w prefiksie i dekoduje. Obie metody wprowadzania są obsługiwane.

Czy można bezpośrednio wyświetlić podgląd w przeglądarce?

Tak. Zdekodowany obraz jest wyświetlany bezpośrednio w przeglądarce za pomocą Blob URL, obsługiwany jest podgląd online. Po potwierdzeniu poprawności zawartości można go pobrać jako plik lokalny lub skopiować Data URL do osadzenia w HTML/CSS. Cały proces podglądu nie wymaga żądań sieciowych.

Jaka jest różnica między narzędziem Base64 na plik?

Base64 na obraz jest zoptymalizowane specjalnie dla formatów obrazów: ①automatyczne wykrywanie typu MIME; ②bezpośredni podgląd w przeglądarce za pomocą Blob URL; ③automatyczne ustawianie rozszerzenia pliku na podstawie MIME (.png/.jpg itp.); ④wyświetlanie informacji o wymiarach obrazu. Base64 na plik to narzędzie ogólnego przeznaczenia, odpowiednie do przywracania i pobierania dowolnych plików binarnych (np. PDF, ZIP, audio itp.).

Co zrobić, jeśli obraz po dekodowaniu wyświetla się niekompletnie?

Możliwe przyczyny: ①ciąg Base64 jest obcięty (sprawdź, czy długość jest kompletna); ②nieprawidłowo określony typ MIME (np. dane PNG dekodowane jako JPG); ③oryginalne dane są już uszkodzone. Zalecenia: ①potwierdź, że źródłowy Base64 jest kompletny; ②spróbuj przełączyć różne typy MIME; ③użyj narzędzia Base64 Validate, aby sprawdzić prawidłowość.

O ile większy jest Base64 od oryginalnego obrazu?

Kodowanie Base64 zwiększa rozmiar oryginalnych danych binarnych o około 33% (3 bajty → 4 znaki). Na przykład 100KB PNG po kodowaniu to około 133KB ciągu Base64. Dlatego Base64 nadaje się do małych obrazów (< 10KB), duże obrazy zaleca się przesyłać bezpośrednio za pomocą HTTP URL.

Czy obsługiwane są obrazy wektorowe SVG?

Tak. SVG to format obrazu wektorowego opartego na XML, po kodowaniu Base64 można go bezpośrednio osadzać w HTML <img> lub CSS background-image. Po dekodowaniu jest renderowany w przeglądarce w sposób wektorowy, można go bezstratnie powiększać. Należy pamiętać, że SVG może zawierać kod JavaScript, podczas używania należy zwrócić uwagę na bezpieczeństwo XSS.

Jak zapisać w określonym formacie?

Po dekodowaniu kliknij przycisk pobierania, narzędzie automatycznie dodaje odpowiednie rozszerzenie na podstawie typu MIME użytego podczas dekodowania (image/png → .png, image/jpeg → .jpg). Jeśli konieczna jest konwersja formatu (np. PNG → JPG), zaleca się najpierw zdekodować, a następnie przekonwertować za pomocą innych narzędzi (np. Canvas/ImageMagick).

Obraz po dekodowaniu jest pusty lub uszkodzony?

Najczęstsze przyczyny: ①Base64 zawiera znaki nowej linii lub spacje, które nie zostały wyczyszczone — najpierw użyj narzędzia Base64 Clean do wstępnego przetworzenia; ②brak paddingu (=) — to narzędzie automatycznie go uzupełnia; ③typ MIME nie pasuje do oryginalnych danych — sprawdź nagłówek Content-Type zwracany przez źródłowe API lub ręcznie spróbuj innego MIME; ④źródłowy Base64 został obcięty podczas transmisji — ponownie pobierz kompletny ciąg.

Czy obsługiwane są duże obrazy (>10MB)?

Tak, ale wydajność renderowania bardzo dużych obrazów przez przeglądarkę spada. Dekodowanie 10MB Base64 (około 7,5MB oryginalnego obrazu) zazwyczaj przebiega płynnie; powyżej 50MB może wystąpić ostrzeżenie o pamięci. Zalecenia: ①najpierw użyj base64-clean, aby usunąć białe znaki; ②dekoduj duże obrazy fragmentami; ③upewnij się, że przeglądarka ma wystarczającą ilość pamięci (zalecane 4GB+).

Rozwiązywanie problemów

Obraz po dekodowaniu wyświetla się pusty

Możliwa niezgodność typu MIME lub niekompletny Base64. Sprawdź: 1) nagłówek Content-Type zwracany przez źródłowe API; 2) ręcznie przełącz typ MIME i spróbuj ponownie; 3) potwierdź, że ciąg Base64 jest kompletny (długość zgodna z oczekiwaniami).

Dekodowanie nie powiodło się: InvalidCharacterError

Ciąg Base64 zawiera nieprawidłowe znaki (spacje, znaki nowej linii, chińskie znaki itp.). Najpierw użyj narzędzia Base64 Clean, aby usunąć wszystkie białe znaki i nieprawidłowe znaki, a następnie dokonaj konwersji.

Nieprawidłowe rozszerzenie pobranego obrazu

Sprawdź, czy typ MIME użyty podczas dekodowania jest zgodny z oryginalnym obrazem. Jeśli źródłowe API zwraca image/jpeg, ale dane Base64 są w rzeczywistości PNG, po pobraniu rozszerzenie będzie .jpg, ale rzeczywisty format to PNG. Zaleca się potwierdzenie oryginalnego formatu na podstawie prefiksu MIME lub nagłówka Content-Type.

Przeglądarka zawiesza się podczas dekodowania dużego obrazu

Ciągi Base64 powyżej 50MB mogą spowodować przepełnienie pamięci. Zalecenia: ①najpierw użyj narzędzia base64-clean, aby usunąć białe znaki; ②dekoduj duże obrazy partiami (np. podzielone na kafelki); ③upewnij się, że przeglądarka ma wystarczającą ilość pamięci (zalecane 4GB+ dostępnej pamięci); ④użyj skryptów po stronie serwera Node.js/Python do obsługi bardzo dużych obrazów.

Obraz SVG nie wyświetla się po dekodowaniu

SVG to format wektorowy oparty na XML, po dekodowaniu należy upewnić się, że: 1) typ MIME to image/svg+xml; 2) SVG nie może zawierać nie-escapowanych znaków specjalnych; 3) niektóre przeglądarki mają ograniczenia bezpieczeństwa dotyczące kodu JavaScript w SVG. Zaleca się najpierw zweryfikować poprawność SVG za pomocą narzędzia do parsowania XML.

Słownik

Base64
Metoda kodowania danych binarnych za pomocą 64 znaków ASCII, zdefiniowana w RFC 4648. To narzędzie wykonuje operację odwrotną: przywraca ciąg Base64 do oryginalnej postaci binarnej obrazu.
Data URL
Format inline URL zdefiniowany w RFC 2397: data:image/<MIME>;base64,<dane>. Może być używany bezpośrednio w HTML img src, CSS background-image. Narzędzie automatycznie rozpoznaje i usuwa prefiks.
MIME type
Typ mediów internetowych, np. image/png, image/jpeg. Przeglądarka na podstawie MIME decyduje, jak interpretować strumień bajtów jako obraz.
PNG
Bezstratny format mapy bitowej z obsługą kanału alfa. Często używany do ikon, zrzutów ekranu i obrazów wymagających zachowania szczegółów. Po kodowaniu Base64 rozmiar wynosi około 1,33 raza oryginału.
JPG/JPEG
Stratny format mapy bitowej, odpowiedni dla zdjęć. Wysoki współczynnik kompresji, ale nie obsługuje przezroczystości. Po kodowaniu Base64 rozmiar wynosi około 1,33 raza oryginału.
WebP
Nowoczesny format obrazu opracowany przez Google, obsługujący zarówno kompresję stratną, jak i bezstratną oraz kanał alfa. Jest o 25-35% mniejszy niż PNG/JPG.
Blob (Binary Large Object)
Natywny obiekt binarny przeglądarki, może opakować strumień bajtów po dekodowaniu Base64 w Blob URL obrazu do podglądu i pobierania.

Tabela porównawcza 8 formatów obrazów

Różne formaty obrazów mają różne algorytmy kompresji, właściwości i zastosowania.

FormatTyp MIMETyp kompresjiObsługa przezroczystościTypowe zastosowanie
PNGimage/pngBezstratnaIkony / zrzuty ekranu / Logo
JPGimage/jpegStratnaZdjęcia / krajobrazy
WebPimage/webpStratna/bezstratnaZalecane dla nowoczesnego Web
GIFimage/gifBezstratna (256 kolorów)✅ (1-bit)Małe animacje / proste ikony
SVGimage/svg+xmlWektorowaLogo / ikony / ilustracje
BMPimage/bmpBrakOpcjonalnieObrazy systemowe Windows
AVIFimage/avifStratna/bezstratnaFormat nowej generacji
ICOimage/x-iconBezstratnaFavicon strony

Porównanie ładowania obrazów Data URL vs HTTP URL

Zdekodowany obraz można osadzić bezpośrednio w HTML/CSS jako Data URL, porównanie z tradycyjnym HTTP URL.

WymiarData URLHTTP URL
Liczba żądań HTTP01
Wielokrotne użycie cacheTrudneŁatwe (CDN/przeglądarka)
RozmiarOryginał + 33%Rozmiar oryginału
Odpowiedni rozmiar< 10 KBDowolny rozmiar
Kompresja transmisjiNie (już zakodowane)gzip/Brotli
Ograniczenia CSPMożliweZazwyczaj dozwolone
Przechowywanie na serwerzeNiepotrzebneWymagane
Dostęp offline✅ (na poziomie pliku)❌ (wymaga cache)

Tabela 5 typowych błędów konwersji Base64 na obraz

W przypadku błędu dekodowania skorzystaj z poniższej tabeli, aby szybko zlokalizować problem.

Objaw błęduMożliwa przyczynaRozwiązanie
Dekodowanie nie powiodło się: InvalidCharacterErrorZawiera spacje, znaki nowej linii, znaki nie-Base64Wstępnie przetwórz za pomocą narzędzia Base64 Clean
Obraz wyświetla się pustyNiezgodność typu MIME z oryginalnymi danymiPrzełącz na prawidłowy MIME (np. dane PNG użyj image/png)
Obraz wyświetla się niekompletnieCiąg Base64 jest obciętyPonownie pobierz kompletny ciąg Base64
Błąd PaddinguURL-safe Base64 pomija paddingUzupełnij = za pomocą narzędzia Base64 Padding
Przepełnienie pamięci przeglądarkiObraz jest zbyt duży (> 50MB)Dekoduj fragmentami lub użyj narzędzia kompresji obrazów

Authoritative References