Obtenga una vista previa de una imagen Base64 de forma segura en el navegador

Una vista previa confiable de una imagen tiene dos tareas separadas: decodificar la representación Base64 y decodificar el formato de imagen resultante. Una cadena puede pasar el primer paso y fallar el segundo porque el archivo está truncado, mal etiquetado o no es compatible con el navegador. Muestre esos estados por separado.

Mantenga una canalización orientada a bytes

Elimine un contenedor de datos URI reconocido a través de un analizador, valide el Base64 y obtenga un Uint8Array. No enrute bytes de imagen a través de un decodificador de texto. Si desea una vista previa local simple, ajuste los bytes en un Blob y cree un objeto URL. Eso evita ensamblar otra cadena Base64 grande solo para mostrar el resultado.

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

Mantenga el objeto URL solo el tiempo que sea necesario

Llame a la función de eliminación devuelta al reemplazar o eliminar la vista previa. Las vistas previas repetidas sin limpieza conservan los recursos del navegador. No revoque un URL antes de que se haya cargado una imagen y no reutilice un URL desechado para una descarga posterior. Si las descargas deben permanecer disponibles, administre su duración por separado.

Utilice comentarios del decodificador de imágenes reales

La firma de un archivo es sólo una pista inicial. El paso de decodificación del elemento de imagen comprueba si el navegador realmente puede cargarlo y expone sus dimensiones. Un error aquí debería indicar que la decodificación de la imagen falló al conservar los bytes originales para su inspección o descarga. No debe sobrescribir la entrada ni informar que el alfabeto Base64 no es válido.

Aplique límites de bytes y dimensiones antes de una renderización costosa siempre que sea posible. Un pequeño archivo comprimido puede describir una imagen muy grande. Evite tratar SVG como una carga útil ráster ordinaria: es un marcado estructurado con diferentes consideraciones de seguridad. Nunca inyecte SVG o HTML desconocidos directamente en la página para que funcione la vista previa.

Finalmente, distinga la vista previa de la conversión. Mostrar un JPEG en un elemento de imagen no crea un PNG. La conversión requiere dibujar una imagen decodificada en un lienzo y exportar el formato elegido, con opciones explícitas de calidad y transparencia. El contenedor de datos URI se describe en MDN: URL de datos; El éxito de la vista previa sigue siendo una verificación del formato del navegador, no una certificación de seguridad general.