Formation incluse dans l'abonnement Elephorm
Les objectifs de cette leçon sont:
Dans cette leçon, nous allons approfondir l'utilisation de la balise Canvas pour intégrer et manipuler des images, les transformant notamment en noir et blanc.
Cette leçon poursuit notre exploration des capacités de la balise Canvas en JavaScript. Nous allons apprendre à gérer les pixels d'une image chargée dans notre canvas, et à les manipuler pour transformer l'image en noir et blanc. Ceci impliquera de récupérer les données des pixels et de les parcourir pour recalculer leurs valeurs en niveaux de gris.
Nous commencerons par définir les dimensions de l'image et récupérer ses pixels grâce à la méthode getImageData. Ensuite, nous parcourrons les pixels un par un pour calculer la moyenne des composants rouge, vert et bleu afin d'assigner cette valeur moyenne à chaque composant, transformant ainsi l'image en noir et blanc.
Enfin, nous réinjecterons les données modifiées dans le canvas via putImageData. Le processus permettra également d'introduire des concepts avancés, tels que la manipulation et l'opération sur les tableaux de données d'image. À la fin de cette leçon, vous saurez comment construire vos propres filtres d'image et comment les appliquer en utilisant Canvas.
