Outil de Conversion en Niveaux de Gris

La conversion en niveaux de gris retire les informations de couleur et représente l’image uniquement avec du noir, du blanc et des gris. Un bon résultat ne se limite pas à faire la moyenne du rouge, du vert et du bleu; on utilise souvent une formule pondérée comme R×0.299 + G×0.587 + B×0.114, car l’œil humain perçoit le vert plus fortement que le bleu. Cela préserve mieux luminosité, contraste et détails. La conversion sert à la photo noir et blanc, aux scans de documents, aux photos d’identité, aux tests d’impression, au design vintage et à l’analyse d’image. Pour graphiques, cartes ou interfaces codés par couleur, il faut vérifier la perte de sens.

La conversion en niveaux de gris transforme chaque pixel de l'espace colorimétrique RGB en une seule valeur de luminance représentant la luminosité perçue. Cet outil utilise la méthode de luminosité (aussi appelée moyenne pondérée), définie par la norme ITU-R BT.601 pour la télévision en définition standard : Gray = R × 0,299 + G × 0,587 + B × 0,114. Ces coefficients reflètent la sensibilité du système visuel humain — les cellules en cônes de la rétine sont environ sensibles à 64 % au rouge (cônes L), 32 % au vert (cônes M) et 2 % au bleu (cônes S) — et les poids approximent la contribution de luminance de chaque canal à la luminosité perçue. Le vert domine à 58,7 % car la vision humaine est la plus aiguë dans la région vert-jaune du spectre (~555 nm). À titre de comparaison, d'autres méthodes courantes de conversion en niveaux de gris produisent des résultats différents. La méthode de la moyenne (Gray = (R + G + B) / 3) traite tous les canaux de manière égale et produit des rouges anormalement sombres et des bleus anormalement clairs. La méthode de désaturation dans l'espace colorimétrique HSL/HSV met la saturation à zéro, ce qui est perceptuellement plus précis que la moyenne mais moins précis que la pondération de luminosité. La méthode Luma de l'ITU-R BT.709 (norme HDTV) utilise des coefficients légèrement différents (0,2126, 0,7152, 0,0722) plus adaptés aux écrans modernes avec un point blanc différent. Les coefficients BT.601 utilisés ici restent les plus largement implémentés et produisent des résultats d'aspect naturel sur la plus large gamme d'images sources. Le pipeline de traitement s'exécute entièrement dans le navigateur. L'image téléchargée est décodée par le décodeur d'image natif du navigateur (supportant JPEG, PNG, WebP, BMP et GIF) en un HTMLImageElement. L'image est dessinée sur un élément Canvas via ctx.drawImage(), ce qui déclenche le compositeur accéléré par GPU du navigateur pour effectuer la conversion d'espace colorimétrique et le redimensionnement. getImageData() lit le tampon de pixels RGBA brut sous forme de Uint8ClampedArray — chaque pixel occupe 4 octets consécutifs (R, G, B, A), la longueur du tableau est donc largeur × hauteur × 4. La boucle de conversion en niveaux de gris itère avec un pas de 4 (i += 4), calcule la somme pondérée et écrit la même valeur de gris sur les trois canans RGB tout en préservant le canal alpha original. putImageData() réécrit le tampon modifié sur le canvas. Enfin, canvas.toBlob('image/png') encode le résultat en PNG sans perte, et URL.createObjectURL() crée une URL blob: pour le lien de téléchargement. Pour le traitement par lot, chaque image est traitée séquentiellement pour éviter de saturer le fil principal — la boucle attend la promesse de chaque conversion avant de démarrer la suivante. Le canvas est réutilisé d'une image à l'autre plutôt que recréé, évitant la charge d'allocation de textures GPU. Les objets File originaux sont conservés à côté des Blobs en niveaux de gris pour que le nom de fichier de téléchargement puisse être dérivé du nom original avec '_grayscale' en suffixe.

• Coefficients de luminance ITU-R BT.601 : R × 0,299 + G × 0,587 + B × 0,114 — dérivés de la fonction de luminosité photopique de l'observateur standard CIE 1931, ces poids modélisent la distribution des cellules en cônes de la rétine humaine (L:M:S ≈ 64:32:2) et la sensibilité maximale à 555 nm (vert-jaune).
• Comparaison des méthodes : la moyenne (R+G+B)/3 produit des rouges sombres et des bleus clairs ; la désaturation (HSL S=0) est meilleure mais pas perceptuellement uniforme ; la Luma BT.709 (0,2126R + 0,7152G + 0,0722B) est plus précise pour les écrans HDTV mais les poids BT.601 utilisés ici sont les plus largement supportés par les navigateurs et outils d'image.
• Pipeline de pixels du canvas : drawImage() → le compositeur GPU décode et redimensionne → getImageData() lit le Uint8ClampedArray RGBA → boucle de somme pondérée par pixel (pas 4, i += 4) → putImageData() réécrit → toBlob('image/png') encode en PNG sans perte → createObjectURL() pour le téléchargement.
• Préservation du canal alpha : l'octet alpha (index i+3) est lu mais non modifié — les pixels transparents restent transparents et les valeurs alpha d'origine passent inchangées, ce qui est important pour les images PNG avec transparence ou des contours anti-aliasés.
• Traitement par lot séquentiel : chaque image est traitée une à la fois via await pour éviter de saturer le fil principal — l'élément canvas est réutilisé entre les images et les objets File sont conservés pour que les noms de fichiers de téléchargement puissent être dérivés des noms originaux avec '_grayscale' en suffixe.
• Considération gamma : les coefficients BT.601 sont appliqués aux valeurs sRGB encodées en gamma, pas aux intensités lumineuses linéaires — c'est l'approche standard et elle produit des résultats visuellement corrects pour l'affichage, mais les applications nécessitant des mesures de lumière physique (imagerie scientifique, photométrie) doivent d'abord linéariser les valeurs sRGB.
• Gestion de la mémoire : chaque Blob en niveaux de gris est conservé en mémoire via une URL objet jusqu'à ce que l'image soit supprimée ou la page fermée — appeler URL.revokeObjectURL() lors de la suppression empêche les fuites mémoire, et la mémoire du Blob est libérée quand plus aucune référence n'existe.