Un aperçu d'image fiable comporte deux tâches distinctes : décoder la représentation Base64 et décoder le format d'image résultant. Une chaîne peut réussir la première étape et échouer la seconde car le fichier est tronqué, mal étiqueté ou n'est pas pris en charge par le navigateur. Montrez ces états séparément.
Conserver un pipeline orienté octet
Supprimez un wrapper de données URI reconnu via un analyseur, validez le Base64 et obtenez un Uint8Array. N'acheminez pas les octets d'image via un décodeur de texte. Si vous souhaitez un simple aperçu local, enveloppez les octets dans un Blob et créez un objet URL. Cela évite d'assembler une autre grande chaîne Base64 juste pour afficher le résultat.
// 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;
}
}Conservez l'objet URL seulement le temps nécessaire
Appelez la fonction de suppression renvoyée lors du remplacement ou de la suppression de l'aperçu. Les aperçus répétés sans nettoyage conservent les ressources du navigateur. Ne révoquez pas un URL avant le chargement d’une image et ne réutilisez pas un URL supprimé pour un téléchargement ultérieur. Si les téléchargements doivent rester disponibles, gérez leur durée de vie séparément.
Utiliser de véritables commentaires du décodeur d'images
Une signature de fichier n'est qu'un premier indice. L'étape de décodage de l'élément image vérifie si le navigateur peut réellement le charger et expose ses dimensions. Une erreur ici devrait indiquer que le décodage de l'image a échoué lors de la conservation des octets d'origine pour inspection ou téléchargement. Il ne doit pas écraser l'entrée ni signaler que l'alphabet Base64 n'était pas valide.
Appliquez des limites d'octets et de dimensions avant un rendu coûteux, lorsque cela est possible. Un petit fichier compressé peut décrire une très grande image. Évitez de traiter SVG comme une charge utile raster ordinaire : il s'agit d'un balisage structuré avec des considérations de sécurité différentes. N’injectez jamais de SVG ou HTML inconnu directement dans la page pour faire fonctionner un aperçu.
Enfin, faites la distinction entre la prévisualisation et la conversion. L'affichage d'un JPEG dans un élément d'image ne crée pas un PNG. La conversion nécessite de dessiner une image décodée sur un canevas et d'exporter le format choisi, avec des choix explicites de qualité et de transparence. Le wrapper Data URI est décrit dans MDN : URL de données; Le succès de l'aperçu reste une vérification du format du navigateur, et non une certification de sécurité générale.