Opis
To narzędzie zamienia zakodowane dane obrazu w zwykły plik graficzny, który można obejrzeć, sprawdzić i zapisać. Obsługuje zarówno surowy Base64, jak i pełne data URL, więc sprawdzi się przy danych skopiowanych z API, atrybutów HTML czy zapisanych rekordów. Po dekodowaniu obraz pojawia się jako podgląd, dzięki czemu łatwo porównać typ MIME, zawartość i wygląd z tym, czego oczekujesz. Jeśli ciąg jest ucięty, zmieniony albo w ogóle nie zawiera obrazu, podgląd nie zostanie wygenerowany i od razu widać, że dane są błędne.
Zastosowania
- Awatary zwracane przez APIRozkoduj dane użytkownika z backendu, aby zobaczyć dokładny obraz przed zapisaniem lub wyświetleniem.
- Fragmenty HTML e-mail i CMSWyświetl obraz osadzony w szablonie, treści e-mail lub edytorze tekstu sformatowanego przed ponownym użyciem.
- Sprawdzenie uszkodzonego pola obrazuZweryfikuj, czy pole zawiera prawidłowy data URL, ucięty Base64 albo dane, które nie są obrazem.
- Wyodrębnianie wygenerowanych plikówZamień Base64 wygenerowany przez aplikację, skrypt lub eksport projektu na plik do otwarcia i udostępnienia.
Jak to dziala
- 1
Wklej ciąg Base64 lub pełny data URL do pola wejściowego.
- 2
Narzędzie dekoduje dane i próbuje zbudować z nich obraz.
- 3
Sprawdź podgląd, aby potwierdzić format i zawartość.
- 4
Pobierz zdekodowany obraz, gdy wynik jest poprawny.
Przyklady
Dekodowanie awatara PNG
Wejscie: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAAF0lEQVR42u3BAQ0AAADCIPunNscwYAAAAAAAAAB4G4xQAAaM9l7sAAAAASUVORK5CYII=
Wynik: Podgląd obrazu PNG 64×64, gotowy do pobrania.
Przydatne, gdy zdjęcie profilu jest przekazywane jako osadzony data URL.
Otwarcie logo Base64 z JSON-a
Wejscie: iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABHklEQVR4nO2WsQ3CMBREz0o7qI4kYgM0wI4QK2gK6qgJ6mA5gQ0QK1gYt4dB8Nw0m3QkV3c9m5b5m0m8xWq2Qqf8r3xgQf5gM8j8x2YVQwQW2gQ9m9j0gk4m0m0j8kQ8G2jQ3C0g3Q0v5tqgYQ8A9m4QKQ0wYzQm3mS8n8v4wY8Q2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw2wQw
Wynik: Podgląd obrazu wygenerowany z przyciętego przykładowego ciągu.
Dobre do sprawdzenia, czy pole Base64 skopiowane z JSON-a jest kompletne i poprawne.
Kontrola obrazu SVG w CSS
Wejscie: data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIGZpbGw9IiMwMDc4ZGYiLz48L3N2Zz4=
Wynik: Podgląd SVG z jednolitym niebieskim kwadratem.
Pomocne, gdy styl arkusz lub komponent przechowuje grafikę jako zakodowany data URL.
FAQ
Co lepiej wklejać: czysty Base64 czy data URL?
Oba formaty są obsługiwane. Data URL jest wygodniejszy, gdy chcesz zachować typ MIME, a czysty Base64 wystarczy, jeśli typ pliku już znasz.
Dlaczego ciąg czasem się dekoduje, ale obraz się nie wyświetla?
Dane mogą być ucięte, uszkodzone albo mają zły typ MIME. Poprawny Base64 nadal może nie dać obrazu, jeśli bajty nie odpowiadają czytelnemu plikowi graficznemu.
Czy można dekodować SVG, PNG i JPEG?
Tak, o ile SVG jest poprawnie zakodowany jako data URL lub Base64. Sam plik musi zawierać prawidłową strukturę SVG.
Co zrobić, jeśli w Base64 są znaki nowej linii lub spacje?
Dodatkowe odstępy mogą przeszkadzać w dekodowaniu. Usuń zbędne białe znaki, jeśli podgląd nie chce się pojawić.
Dlaczego pobrany plik ma inną nazwę niż oryginał?
Base64 nie zapisuje nazwy pliku. Narzędzie dekoduje treść obrazu, a nazwę podczas pobierania ustala przeglądarka lub użytkownik.
Czy da się wymusić obraz z Base64, który nie zawiera grafiki?
Nie. Jeśli zakodowane bajty nie są danymi obrazu, narzędzie nie stworzy z nich użytecznego pliku graficznego.