En pålitelig forhåndsvisning av bilder har to separate jobber: dekode Base64-representasjonen og dekode det resulterende bildeformatet. En streng kan passere det første trinnet og mislykkes i det andre fordi filen er avkortet, feilmerket eller ikke støttes av nettleseren. Vis disse statene separat.
Hold en byte-orientert rørledning
Fjern en gjenkjent Data URI wrapper gjennom en parser, valider Base64, og skaff en Uint8Array. Ikke rute bildebytes gjennom en tekstdekoder. Hvis du vil ha en enkel lokal forhåndsvisning, pakk bytene inn i en Blob og lag et objekt URL. Det unngår å sette sammen en annen stor Base64-streng bare for å 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 objektet URL bare så lenge det er nødvendig
Anrop den returnerte avhendingsfunksjonen når du erstatter eller fjerner forhåndsvisningen. Gjentatte forhåndsvisninger uten opprydding beholder nettleserressurser. Ikke tilbakekall en URL før et bilde er lastet inn, og ikke gjenbruk en kassert URL for en senere nedlasting. Hvis nedlastinger må forbli tilgjengelige, administrer levetiden deres separat.
Bruk ekte bildedekoder-tilbakemelding
En filsignatur er bare et innledende hint. Bildeelementets dekodingstrinn sjekker om nettleseren faktisk kan laste det og viser dimensjonene. En feil her skulle si at bildedekodingen mislyktes mens de originale bytene ble beholdt for inspeksjon eller nedlasting. Den skal ikke overskrive inndata eller rapportere at Base64-alfabetet var ugyldig.
Bruk byte- og dimensjonsgrenser før dyr gjengivelse der det er mulig. En liten komprimert fil kan beskrive et veldig stort bilde. Unngå å behandle SVG som en vanlig rasternyttelast: det er strukturert markering med forskjellige sikkerhetshensyn. Injiser aldri ukjente SVG eller HTML direkte inn på siden for å få en forhåndsvisning til å fungere.
Til slutt, skille forhåndsvisning fra konvertering. Å vise en JPEG i et bildeelement skaper ikke en PNG. Konvertering krever å tegne et dekodet bilde til et lerret og eksportere det valgte formatet, med eksplisitte valg for kvalitet og gjennomsiktighet. Data URI-omslaget er beskrevet i MDN: datanettadresser; forhåndsvisningssuksess forblir en sjekk i nettleserformat, ikke en generell sikkerhetssertifisering.