Niezawodny podgląd obrazu ma dwa oddzielne zadania: dekodowanie reprezentacji Base64 i dekodowanie wynikowego formatu obrazu. Ciąg może przejść pierwszy krok, a nie przejść drugiego, ponieważ plik jest obcięty, błędnie oznaczony lub nieobsługiwany przez przeglądarkę. Pokaż te stany osobno.
Zachowaj potok zorientowany na bajty
Usuń rozpoznane opakowanie danych URI za pomocą parsera, sprawdź poprawność Base64 i uzyskaj Uint8Array. Nie kieruj bajtów obrazu przez dekoder tekstu. Jeśli chcesz mieć prosty podgląd lokalny, zawiń bajty w obiekt Blob i utwórz obiekt URL. Pozwala to uniknąć składania kolejnego dużego ciągu Base64 tylko po to, aby wyświetlić wynik.
// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
const url = URL.createObjectURL(new Blob([bytes], { type }));
try {
imageElement.src = url;
await imageElement.decode();
return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
dispose: () => URL.revokeObjectURL(url) };
} catch (error) {
URL.revokeObjectURL(url);
imageElement.removeAttribute('src');
throw error;
}
}Przechowuj obiekt URL tylko tak długo, jak to konieczne
Wywołaj zwróconą funkcję usuwania podczas zastępowania lub usuwania podglądu. Powtarzające się podglądy bez czyszczenia powodują zachowanie zasobów przeglądarki. Nie odwołuj URL przed załadowaniem obrazu i nie używaj ponownie usuniętego URL do późniejszego pobrania. Jeśli pliki do pobrania muszą pozostać dostępne, zarządzaj ich czasem życia oddzielnie.
Wykorzystaj informacje zwrotne z prawdziwego dekodera obrazu
Podpis pliku jest jedynie wstępną wskazówką. Krok dekodowania elementu obrazu sprawdza, czy przeglądarka faktycznie może go załadować i ujawnia jego wymiary. Błąd powinien wskazywać, że dekodowanie obrazu nie powiodło się przy zachowaniu oryginalnych bajtów do sprawdzenia lub pobrania. Nie powinien nadpisywać danych wejściowych ani zgłaszać, że alfabet Base64 jest nieprawidłowy.
Jeśli to możliwe, przed kosztownym renderowaniem zastosuj limity bajtów i wymiarów. Mały skompresowany plik może opisać bardzo duży obraz. Unikaj traktowania SVG jako zwykłego ładunku rastrowego: jest to znacznik strukturalny uwzględniający inne względy bezpieczeństwa. Nigdy nie wstawiaj nieznanego SVG lub HTML bezpośrednio na stronę, aby podgląd działał.
Na koniec odróżnij podgląd od konwersji. Wyświetlenie JPEG w elemencie obrazu nie powoduje utworzenia PNG. Konwersja wymaga narysowania zdekodowanego obrazu na płótnie i wyeksportowania wybranego formatu z wyraźnymi opcjami jakości i przezroczystości. Opakowanie Data URI opisano w MDN: adresy URL danych; Powodzenie podglądu pozostaje sprawdzeniem formatu przeglądarki, a nie ogólnym certyfikatem bezpieczeństwa.