En pålidelig billedeksempel har to separate opgaver: afkode Base64-repræsentationen og afkode det resulterende billedformat. En streng kan bestå det første trin og mislykkes det andet, fordi filen er afkortet, forkert mærket eller ikke understøttet af browseren. Vis disse stater separat.
Hold en byte-orienteret pipeline
Fjern en genkendt Data URI wrapper gennem en parser, valider Base64, og få en Uint8Array. Rut ikke billedbytes gennem en tekstdekoder. Hvis du vil have en simpel lokal forhåndsvisning, skal du pakke bytes ind i en Blob og oprette et objekt URL. Det undgår at samle endnu en stor Base64 streng bare for at vise 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;
}
}Behold kun objektet URL så længe det er nødvendigt
Kald den returnerede bortskaffelsesfunktion, når du udskifter eller fjerner forhåndsvisningen. Gentagne forhåndsvisninger uden oprydning bevarer browserressourcer. Tilbagekald ikke en URL før et billede er indlæst, og genbrug ikke en bortskaffet URL til en senere download. Hvis downloads skal forblive tilgængelige, skal du administrere deres levetid separat.
Brug ægte billeddekoderfeedback
En filsignatur er kun et indledende hint. Billedelementets afkodningstrin kontrollerer, om browseren faktisk kan indlæse det, og viser dets dimensioner. En fejl her skulle sige, at billedafkodning mislykkedes, mens de originale bytes blev bevaret til inspektion eller download. Det bør ikke overskrive input eller rapportere, at Base64 alfabetet var ugyldigt.
Anvend byte- og dimensionsgrænser før dyr gengivelse, hvor det er muligt. En lille komprimeret fil kan beskrive et meget stort billede. Undgå at behandle SVG som en almindelig rasternyttelast: det er struktureret opmærkning med forskellige sikkerhedsovervejelser. Injicer aldrig ukendte SVG eller HTML direkte på siden for at få en forhåndsvisning til at fungere.
Til sidst skal du skelne forhåndsvisning fra konvertering. Visning af en JPEG i et billedelement skaber ikke en PNG. Konvertering kræver tegning af et afkodet billede til et lærred og eksport af det valgte format med eksplicitte kvalitets- og gennemsigtighedsvalg. Data URI indpakningen er beskrevet i MDN: data-URL'er; forhåndsvisningssucces forbliver en kontrol i browserformat, ikke en generel sikkerhedscertificering.