CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 Transformation d'une Image en Noir et Blanc avec Canvas

Transformation d'une Image en Noir et Blanc avec Canvas

Balise Canvas transformation de l'image
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,3
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Manipulation des Pixels d'une Image

Objectifs

Les objectifs de cette leçon sont:

  • Comprendre comment charger et manipuler des pixels d'image dans un canvas.
  • Apprendre à transformer une image en noir et blanc.
  • Explorer la création de filtres d'image personnalisés.

Résumé

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.

Description

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.

Voir plus

Questions fréquentes

Pourquoi est-il nécessaire d'utiliser la méthode getImageData?
La méthode getImageData est utilisée pour obtenir les données des pixels d'une image, ce qui permet de les manipuler individuellement.
Comment la transformation en noir et blanc est effectuée?
La transformation est effectuée en calculant la moyenne des valeurs rouge, verte et bleue de chaque pixel, puis en assignant cette valeur moyenne à chacun des composants.
Quels autres types de filtres peuvent être créés avec Canvas?
Avec Canvas, on peut créer divers filtres comme les filtres sepia, les ajustements de contraste, ainsi que des filtres de transparence.

Programme détaillé

3 commentaires
4,3
3 votes
5
4
3
2
1
phbernard
Il y a 2 semaines
Formation de bon niveau M Audoux est un professionnel.
Dommage que nous n'ayons pas les fichiers, par ailleurs M Audoux devrait également montré les fichiers CSS
D'autre par les fichiers JS à la version utilisée par M Audoux simplifieraient le travail de l'étudiant.
Azraël
Il y a 3 ans
Bonne formation.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
lyazid.meaux
Il y a 4 ans
Très bonne formation, juste ce qu'il faut.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.

Merci.