Bekijk een Base64-afbeelding veilig in de browser

Een betrouwbaar afbeeldingsvoorbeeld heeft twee afzonderlijke taken: het decoderen van de Base64-weergave en het decoderen van het resulterende afbeeldingsformaat. Een string kan de eerste stap doorstaan ​​en de tweede mislukken omdat het bestand is afgekapt, verkeerd is gelabeld of niet wordt ondersteund door de browser. Geef deze staten afzonderlijk weer.

Houd een byte-georiënteerde pijplijn bij

Verwijder een herkende Data URI-wrapper via een parser, valideer de Base64 en verkrijg een Uint8Array. Stuur geen afbeeldingsbytes door een tekstdecoder. Als u een eenvoudig lokaal voorbeeld wilt, plaatst u de bytes in een blob en maakt u een object URL. Dat vermijdt dat er nog een grote Base64-string moet worden samengesteld om het resultaat weer te geven.

// 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;
  }
}

Bewaar het object URL slechts zo lang als nodig is

Roep de geretourneerde afvoerfunctie op wanneer u het voorbeeld vervangt of verwijdert. Herhaalde voorbeelden zonder opschoning behouden browserbronnen. Trek een URL niet in voordat een afbeelding is geladen, en gebruik een verwijderde URL niet opnieuw voor een latere download. Als downloads beschikbaar moeten blijven, beheer dan de levensduur ervan afzonderlijk.

Gebruik echte feedback van de beelddecoder

Een bestandshandtekening is slechts een eerste hint. De decodeerstap van het afbeeldingselement controleert of de browser het daadwerkelijk kan laden en maakt de afmetingen ervan zichtbaar. Een fout hier zou moeten zeggen dat het decoderen van afbeeldingen mislukte terwijl de originele bytes behouden bleven voor inspectie of download. Het mag de invoer niet overschrijven of melden dat het alfabet Base64 ongeldig is.

Pas waar mogelijk byte- en dimensielimieten toe vóór dure rendering. Een klein gecomprimeerd bestand kan een zeer grote afbeelding beschrijven. Behandel SVG niet als een gewone rasterpayload: het is gestructureerde opmaak met verschillende beveiligingsoverwegingen. Injecteer nooit onbekende SVG of HTML rechtstreeks in de pagina om een ​​voorbeeld te laten werken.

Maak ten slotte een onderscheid tussen voorbeeldweergave en conversie. Het weergeven van een JPEG in een afbeeldingselement creëert geen PNG. Conversie vereist het tekenen van een gedecodeerde afbeelding naar een canvas en het exporteren van het gekozen formaat, met expliciete keuzes voor kwaliteit en transparantie. De Data URI-wrapper wordt beschreven in MDN: gegevens-URL's; Het succes van een voorbeeld blijft een controle van het browserformaat, en geen algemene veiligheidscertificering.