Traitement d'images haute performance côté client
Le traitement d'images dans un navigateur est désormais une exigence standard. Vous pourriez créer des éditeurs de photos, des outils de gestion d'assets ou des filtres d'accessibilité. Pour maintenir la réactivité de votre interface utilisateur (UI), vous avez besoin d'une faible latence.
Une tâche simple est l'inversion des couleurs. Cela consiste à transformer les valeurs RGB en leurs négatives. Si vous utilisez l'approche standard sur des images 4K, vous rencontrerez des goulots d'étranglement matériels.
Le Problème : l'itération naïve
La plupart des développeurs utilisent la méthode getImageData(). Celle-ci renvoie un Uint8ClampedArray. Ce tableau stocke les pixels sous forme de canaux Rouge, Vert, Bleu et Alpha (RGBA).
Une boucle standard ressemble à ceci :
- Parcourir chaque octet individuellement.
- Soustraire chaque valeur de couleur à 255.
- Ignorer le canal Alpha.
Cela fonctionne pour les petites images. Cela échoue pour les assets 4K. Une image 4K contient plus de 8 millions de pixels. Une boucle standard effectue plus de 33 millions d'écritures distinctes. Cela bloque le thread principal, provoquant des saccades du navigateur et des pertes de frames.
La Solution : manipulation de buffer 32 bits
Vous pouvez arrêter de traiter les pixels comme quatre canaux distincts. Au lieu de cela, superposez un Uint32Array sur le buffer de données.
En utilisant une vue 32 bits, vous regroupez R, G, B et A en un seul entier. Votre boucle n'effectue désormais que 8,2 millions d'itérations au lieu de 33 millions. Vous traitez une seule opération par pixel au lieu de quatre.
Inversion rapide des couleurs via l'opérateur XOR bit à bit
Pour inverser les couleurs sans toucher à l'Alpha, utilisez l'opérateur XOR bit à bit (^). Utilisez le masque 0x00FFFFFF.
Comment ça marche :
- Le masque cible uniquement les bits de couleur.
- Les bits Alpha restent inchangés.
- Le CPU traite cela en un seul cycle.
Les Résultats :
- Assets 1080p : 3,8x plus rapide.
- Templates 2K : 4,1x plus rapide.
- Wallpapers 4K : 4,4x plus rapide.
Conseil de pro : utilisez les Web Workers
Si vous traitez de nombreux fichiers haute résolution, même les opérations 32 bits peuvent ralentir l'UI. Déplacez la logique vers un Web Worker. Utilisez les Transferable Objects pour transmettre le buffer. Cela évite la copie de données et libère votre thread principal.
Arrêtez d'utiliser des boucles lourdes. Utilisez des mots de 32 bits et des flags bit à bit pour construire des pipelines d'images légers et rapides.