← Projets

browser-image-guard

J’ai créé browser-image-guard pour valider et traiter les images avant envoi dans le navigateur, convertir HEIC et retirer les métadonnées EXIF et GPS.

  • TypeScript
  • Web Workers
  • Canvas API
  • ESM
  • npm
npm install browser-image-guard

Le problème

Je prends en charge les fichiers dont le type MIME est trompeur et les images HEIC que le backend peut refuser. Les photos peuvent aussi conserver des métadonnées EXIF, dont les coordonnées GPS, lors de l’envoi.

Je tiens compte des échecs de compression, des anciens navigateurs mobiles qui peuvent rester bloqués au chargement et des restrictions Content-Security-Policy qui peuvent empêcher un Web Worker de fonctionner.

L’approche

Je vérifie les magic bytes plutôt que de me fier à l’en-tête MIME. Le pipeline convertit HEIC/HEIF en JPEG et retire les métadonnées EXIF et GPS par réencodage. Il corrige aussi l’orientation, redimensionne et compresse dans les limites de taille, puis nettoie les noms de fichiers.

J’exécute le traitement dans un Web Worker quand l’environnement le permet, avec un repli sur le thread principal. Les erreurs typées permettent à l’interface appelante de signaler les échecs de traitement.

Je propose processImage(file) comme point d’entrée. La fonction renvoie un JPEG compressé prêt à l’envoi ou lève une erreur typée.

Le résultat

Je publie la bibliothèque sur npm au format ESM avec les types TypeScript. Je passe le fichier sélectionné à processImage(file), puis j’envoie le JPEG obtenu et je traite les erreurs dans l’interface.