Konwerter Base64 na obraz

Czym jest dekodowanie Base64 na obraz?

// A Base64 PNG payload (no prefix)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

// The decoder infers the format from the leading bytes:
//   iVBORw0KGgo → PNG
//   /9j/        → JPEG
//   R0lGOD      → GIF
//   UklGR       → WebP
//   PHN2Zy      → SVG (<svg)

// Reconstructed as a real file, downloadable as image.png
// (1 × 1 transparent PNG, 68 bytes — lossless round trip)

Kluczowe funkcje

Przykłady

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

1 × 1 PNG, przezroczysty — wyrenderowany podgląd, do pobrania jako .png

/9j/4AAQSkZJRgABAQEAYABgAAD…

JPEG wykryty z bajtów magicznych — podgląd + pobranie jako .jpg

iVBORw0KGgoAAAANS
UhEUgAAAAEAAAAB
CAYAAAA…

Białe znaki usunięte automatycznie — prawidłowy PNG zdekodowany

Jak skonwertować Base64 na obraz

1. 1

   Wklej ciąg Base64

   Wstaw pełne data URI lub sam surowy ładunek Base64. Dekoder automatycznie usuwa białe znaki i złamania wiersza oraz akceptuje wejście z prefiksem data: lub bez niego.

2. 2

   Sprawdź podgląd i metadane

   Obraz renderuje się natychmiast na szachownicy, dzięki czemu przezroczystość jest widoczna. Narzędzie pokazuje zdekodowane wymiary, typ MIME i rozmiar w bajtach — wnioskując format z bajtów magicznych, gdy nie ma prefiksu.

3. 3

   Pobierz obraz

   Kliknij Pobierz, aby zapisać odtworzony plik z poprawnym rozszerzeniem. Dekodowanie jest bezstratne, więc wynik jest bit w bit identyczny z oryginalnym, zakodowanym obrazem.

Częste pułapki

…WjR9awAAAABJRU5ErkJggg
// missing trailing == — fails to decode

…WjR9awAAAABJRU5ErkJggg==
// complete with padding — decodes cleanly

JVBERi0xLjcN…
// this is a Base64 PDF (%PDF header), not an image

iVBORw0KGgo…
// this is a Base64 PNG — renders correctly

url("data:image/png;base64,iVBORw0KGgo…")
// the url(" and ") are not part of the data

data:image/png;base64,iVBORw0KGgo…
// just the data URI

data:image/png;base64,iVBORw0KGgo%2B%2F…
// %2B / %2F are URL-encoded + and /

data:image/png;base64,iVBORw0KGgo+/…
// URL-decode first, then decode the image

Typowe zastosowania

Wyodrębnij zasób z data URI

Znalazłeś obraz osadzony w arkuszu stylów lub HTML jako data URI i potrzebujesz właściwego pliku? Wklej ciąg, potwierdź podgląd i pobierz oryginalny PNG, JPG lub SVG — bez potrzeby hostowania go czy odtwarzania.

Zbadaj miniaturę z odpowiedzi API

API zwróciło pole obrazu Base64, a Ty chcesz zobaczyć, co to jest. Wklej ładunek, aby od razu go wyrenderować, odczytać jego rzeczywiste wymiary i typ oraz zapisać do bliższej analizy lub zgłoszeń błędów.

Debuguj zepsuty obraz inline

Osadzony obraz nie renderuje się na Twojej stronie. Upuść jego Base64 tutaj: jeśli podgląd wyświetli się poprawnie, dane są prawidłowe, a problem leży w Twoim znaczniku lub typie MIME; jeśli zawiedzie, sam ciąg jest obcięty lub uszkodzony.

Odzyskaj obraz z pliku konfiguracyjnego lub motywu

Narzędzia buildujące i pakiety motywów często osadzają ikony i logotypy jako Base64. Zdekoduj ciąg, aby wyciągnąć zasób z powrotem jako zwykły plik, który możesz edytować, ponownie wyeksportować lub wykorzystać gdzie indziej.

Zweryfikuj wynik narzędzia buildującego

Bundler lub skrypt wygenerował data URI, a Ty chcesz potwierdzić, że jest prawidłowe i poprawne, zanim je wyślesz. Zdekodowanie go tutaj to najszybsza wizualna kontrola, że krok kodowania wyprodukował oczekiwany obraz.

Zamień Base64 z powrotem na plik do udostępnienia

Ktoś przysłał Ci obraz jako blob Base64 w czacie lub dokumencie. Wklej go, podejrzyj i pobierz prawdziwy plik, który możesz otworzyć, załączyć lub wgrać w zwykły sposób.

Szczegóły techniczne

Jak działa dekodowanie

Wbudowana funkcja atob przeglądarki konwertuje ładunek Base64 na binarny ciąg, który narzędzie kopiuje bajt po bajcie do Uint8Array. Ta tablica typowana jest opakowywana w Blob oznaczony wykrytym typem MIME, a object URL kieruje podgląd i link pobierania na nią. Każda grupa czterech znaków Base64 daje trzy bajty; końcowe wypełnienie = oznacza resztę jedno- lub dwubajtową. Proces jest dokładny i bezstratny — odtworzone bajty pasują do oryginalnego pliku precyzyjnie.

Wykrywanie formatu z bajtów magicznych

Gdy wejście nie ma prefiksu data: deklarującego typ MIME, dekoder rozpoznaje format z kilku pierwszych znaków Base64, które kodują bajty sygnaturowe pliku. iVBORw0KGgo dekoduje się do nagłówka PNG, /9j/ do markera SOI JPEG, R0lGOD do GIF, UklGR do kontenera RIFF/WebP, PHN2Zy i PD94bWw do otwarć

Bez sieci, bez przechowywania

Dekodowanie, podgląd i pobranie są w całości lokalne. Nie ma żadnego fetch, żadnego XMLHttpRequest ani żadnej podróży do serwera — jedyną aktywnością sieciową, jaką strona kiedykolwiek wykonuje, jest jej własne wczytanie. Wklejone ciągi są przechowywane w pamięci przez czas życia strony i odrzucane, gdy ją zamkniesz lub przeładujesz. To właśnie czyni narzędzie bezpiecznym dla poufnej grafiki i użytecznym offline.

Dobre praktyki

Kopiuj cały ciąg, włącznie z wypełnieniem

Ciąg obrazu Base64 musi być kompletny, by się zdekodować. Upewnij się, że kopiujesz każdy znak, zwłaszcza końcowe wypełnienie = lub == — wartość, która kończy się w połowie ciągu, zawiedzie. Jeśli dekodowanie się nie udaje, ponowne zaznaczenie i skopiowanie pełnego ciągu to pierwsza rzecz do wypróbowania.

Zaufaj wykrywaniu z bajtów magicznych dla ciągów bez prefiksu

Jeśli masz tylko surowy ładunek, wklej go bez zmian — nie ma potrzeby ręcznie budować prefiksu data:. Dekoder wnioskuje format z początkowych bajtów i przypisuje poprawny typ MIME oraz rozszerzenie. Prefiks dodawaj ręcznie tylko wtedy, gdy konkretnie potrzebujesz nadpisać wykryty typ.

Zweryfikuj wymiary przed pobraniem

Użyj raportowanych wymiarów w pikselach i typu MIME jako kontroli zdrowego rozsądku, że zdekodowałeś zamierzony zasób — zwłaszcza gdy wyciągasz jeden ciąg z pliku zawierającego kilka. Wynik 1×1 zwykle oznacza na przykład, że chwyciłeś piksel śledzący zamiast obrazu, którego chciałeś.

Pamiętaj, że Base64 nie jest bezpieczny

Dekodowanie nie wymaga żadnego klucza, więc nigdy nie polegaj na Base64, by ukryć zawartość obrazu. Jeśli otrzymałeś ciąg, spodziewając się, że jest chroniony, nie jest — każdy może go tutaj zdekodować w kilka sekund. Prawdziwa ochrona wymaga szyfrowania i kontroli dostępu, a nie kodowania.

Ponowne kodowanie w obie strony jest bezstratne

Zdekodowanie, a następnie ponowne zakodowanie tego samego obrazu jest bezstratne, więc możesz bezpiecznie przejść w obie strony przez obie karty, aby przetestować potok. Jeśli musisz zmniejszyć zasób, skompresuj zdekodowany plik naszym Kompresorem obrazów przed ponownym zakodowaniem go na mniejsze data URI.

Najczęściej zadawane pytania