CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery Intégration et Transformation d'Images en Noir et Blanc avec Canvas

Intégration et Transformation d'Images en Noir et Blanc avec Canvas

Balise Canvas création d'un Context
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery
Revoir le teaser Je m'abonne
4,3
Transcription
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Étapes d'Intégration d'Images avec Canvas

Objectifs

Les objectifs de cette vidéo sont :


- Comprendre comment créer et utiliser un élément Canvas.'


- Apprendre à charger et manipuler des images avec JavaScript.


- Savoir transformer une image en noir et blanc par traitement de pixels.

Résumé

Apprenez à utiliser la balise Canvas pour intégrer et transformer une image en noir et blanc en manipulant directement les pixels avec JavaScript.

Description

Cette leçon vous guide à travers l'intégration et la transformation d'images en noir et blanc en utilisant la balise Canvas de HTML. Bien que des filtres existent pour cette tâche, ce tutoriel met l'accent sur la manipulation directe des pixels via JavaScript. Vous apprendrez à :


- Créer un élément Canvas dans une page HTML.


- Charger et dessiner une image sur Canvas avec JavaScript.


- Manipuler chaque pixel de l'image pour la convertir en noir et blanc.


Cette méthode permet une compréhension approfondie du fonctionnement de Canvas et de ses capacités en terme de traitement d'images et d'animations.

Voir plus

Questions fréquentes

Pourquoi utiliser Canvas pour manipuler des images ?
Canvas permet une manipulation fine des images via JavaScript, offrant ainsi des possibilités étendues de traitement et de modification des pixels.
Quelles méthodes JavaScript sont essentielles pour travailler avec Canvas ?
Les méthodes essentielles incluent getContext pour obtenir le contexte de dessin, drawImage pour dessiner une image, et getImageData pour manipuler les pixels.
Quels contextes Canvas sont disponibles dans HTML ?
Actuellement, le contexte 2D est couramment utilisé. Dans le futur, des contextes 3D pourraient être disponibles pour des rendus graphiques plus avancés.

Programme détaillé

3 commentaires
4,3
3 votes
5
4
3
2
1
phbernard
Il y a 2 mois
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.