Eine zuverlässige Bildvorschau hat zwei separate Aufgaben: die Base64-Darstellung dekodieren und das resultierende Bildformat dekodieren. Eine Zeichenfolge kann den ersten Schritt bestehen und den zweiten nicht bestehen, weil die Datei abgeschnitten, falsch beschriftet oder vom Browser nicht unterstützt wird. Zeigen Sie diese Staaten separat an.
Behalten Sie eine byteorientierte Pipeline bei
Entfernen Sie einen erkannten Daten-Wrapper URI über einen Parser, validieren Sie Base64 und rufen Sie einen Uint8Array ab. Leiten Sie Bildbytes nicht über einen Textdecoder weiter. Wenn Sie eine einfache lokale Vorschau wünschen, packen Sie die Bytes in einen Blob und erstellen Sie ein Objekt URL. Dadurch wird vermieden, dass nur zur Anzeige des Ergebnisses ein weiterer großer String Base64 zusammengestellt werden muss.
// 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;
}
}Behalten Sie das Objekt URL nur so lange wie nötig
Rufen Sie die zurückgegebene Dispose-Funktion auf, wenn Sie die Vorschau ersetzen oder entfernen. Wiederholte Vorschauen ohne Bereinigung schonen die Browserressourcen. Widerrufen Sie einen URL nicht, bevor ein Bild geladen wurde, und verwenden Sie einen entsorgten URL nicht für einen späteren Download wieder. Wenn Downloads verfügbar bleiben müssen, verwalten Sie deren Lebensdauer separat.
Nutzen Sie echtes Bild-Decoder-Feedback
Eine Dateisignatur ist nur ein erster Hinweis. Der Dekodierungsschritt des Bildelements prüft, ob der Browser es tatsächlich laden kann und legt seine Abmessungen offen. Ein Fehler hier sollte bedeuten, dass die Bilddecodierung fehlgeschlagen ist, während die ursprünglichen Bytes zur Überprüfung oder zum Herunterladen beibehalten wurden. Es sollte die Eingabe nicht überschreiben oder melden, dass das Alphabet Base64 ungültig war.
Wenden Sie nach Möglichkeit Byte- und Dimensionsbeschränkungen vor teurem Rendering an. Eine kleine komprimierte Datei kann ein sehr großes Bild beschreiben. Behandeln Sie SVG nicht als gewöhnliche Raster-Nutzlast: Es handelt sich um strukturiertes Markup mit unterschiedlichen Sicherheitsaspekten. Fügen Sie niemals unbekanntes SVG oder HTML direkt in die Seite ein, damit eine Vorschau funktioniert.
Unterscheiden Sie abschließend zwischen Vorschau und Konvertierung. Durch die Anzeige eines JPEG in einem Bildelement wird kein PNG erstellt. Bei der Konvertierung muss ein dekodiertes Bild auf eine Leinwand gezeichnet und das ausgewählte Format mit expliziten Qualitäts- und Transparenzoptionen exportiert werden. Der Data URI-Wrapper wird in beschrieben MDN: Daten-URLs; Der Vorschauerfolg bleibt eine Überprüfung des Browserformats und keine allgemeine Sicherheitszertifizierung.