Visualizza l'anteprima di un'immagine Base64 in tutta sicurezza nel browser

Un'anteprima affidabile dell'immagine ha due compiti separati: decodificare la rappresentazione Base64 e decodificare il formato dell'immagine risultante. Una stringa può superare il primo passaggio e fallire il secondo perché il file è troncato, etichettato erroneamente o non supportato dal browser. Mostra questi stati separatamente.

Mantenere una pipeline orientata ai byte

Rimuovere un wrapper dati riconosciuto URI tramite un parser, convalidare Base64 e ottenere un Uint8Array. Non instradare byte di immagine attraverso un decodificatore di testo. Se desideri un'anteprima locale semplice, racchiudi i byte in un BLOB e crea un oggetto URL. Ciò evita di assemblare un'altra stringa Base64 di grandi dimensioni solo per visualizzare il risultato.

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

Conserva l'oggetto URL solo per il tempo necessario

Chiama la funzione di smaltimento restituito quando si sostituisce o si rimuove l'anteprima. Le anteprime ripetute senza pulizia conservano le risorse del browser. Non revocare un URL prima del caricamento di un'immagine e non riutilizzare un URL eliminato per un download successivo. Se i download devono rimanere disponibili, gestisci la loro durata separatamente.

Utilizza il feedback reale del decodificatore di immagini

Una firma del file è solo un suggerimento iniziale. La fase di decodifica dell'elemento immagine verifica se il browser può effettivamente caricarlo ed espone le sue dimensioni. Un errore qui dovrebbe indicare che la decodifica dell'immagine non è riuscita mantenendo i byte originali per l'ispezione o il download. Non dovrebbe sovrascrivere l'input o segnalare che l'alfabeto Base64 non è valido.

Applica limiti di byte e dimensioni prima del rendering costoso, ove possibile. Un piccolo file compresso può descrivere un'immagine molto grande. Evita di trattare SVG come un normale payload raster: si tratta di markup strutturato con diverse considerazioni sulla sicurezza. Non inserire mai SVG o HTML sconosciuti direttamente nella pagina per far funzionare l'anteprima.

Infine, distingui l'anteprima dalla conversione. La visualizzazione di un JPEG in un elemento immagine non crea un PNG. La conversione richiede il disegno di un'immagine decodificata su una tela e l'esportazione nel formato scelto, con scelte esplicite di qualità e trasparenza. Il wrapper Dati URI è descritto in MDN: URL dei dati; Il successo dell'anteprima rimane un controllo del formato del browser, non una certificazione di sicurezza generale.