En pålitlig bildförhandsgranskning har två separata jobb: avkoda representationen Base64 och avkoda det resulterande bildformatet. En sträng kan klara det första steget och misslyckas i det andra eftersom filen är trunkerad, felmärkt eller inte stöds av webbläsaren. Visa dessa stater separat.
Håll en byte-orienterad pipeline
Ta bort ett igenkänt Data URI-omslag genom en parser, validera Base64 och skaffa ett Uint8Array. Dirigera inte bildbytes genom en textavkodare. Om du vill ha en enkel lokal förhandsgranskning, slå in byten i en Blob och skapa ett objekt URL. Det undviker att montera ytterligare en stor Base64-sträng bara för att visa resultatet.
// 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;
}
}Behåll objektet URL bara så länge som behövs
Anropa den returnerade kasseringsfunktionen när du byter ut eller tar bort förhandsgranskningen. Upprepade förhandsvisningar utan rensning behåller webbläsarresurser. Återkalla inte en URL innan en bild har laddats, och återanvänd inte en kasserad URL för en senare nedladdning. Om nedladdningar behöver förbli tillgängliga, hantera deras livslängd separat.
Använd riktig bildavkodarfeedback
En filsignatur är bara ett första tips. Bildelementets avkodningssteg kontrollerar om webbläsaren faktiskt kan ladda det och exponerar dess dimensioner. Ett fel här bör säga att bildavkodningen misslyckades medan de ursprungliga byten behölls för inspektion eller nedladdning. Den ska inte skriva över inmatningen eller rapportera att alfabetet Base64 var ogiltigt.
Tillämpa byte- och dimensionsgränser före dyr rendering där det är möjligt. En liten komprimerad fil kan beskriva en mycket stor bild. Undvik att behandla SVG som en vanlig rasternyttolast: det är strukturerad uppmärkning med olika säkerhetsöverväganden. Injicera aldrig okända SVG eller HTML direkt på sidan för att få en förhandsgranskning att fungera.
Slutligen, skilja förhandsgranskning från konvertering. Att visa en JPEG i ett bildelement skapar inte en PNG. Konvertering kräver att man ritar en avkodad bild till en duk och exporterar det valda formatet, med tydliga val av kvalitet och transparens. Data URI omslaget beskrivs i MDN: datawebbadresser; Framgång för förhandsvisningar förblir en kontroll av webbläsarformat, inte en allmän säkerhetscertifiering.