Dans ce nouveau cours sur l’API JavaScript Canvas, vous allez apprendre à copier les pixels d’un endroit à un autre.
C’est très utilisé dans la création de jeux vidéo ou d’applications Web.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour copier des pixels avec Canvas en JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu expert en développement applicatif, dans cette vidéo vous allez apprendre à manipuler les pixels avec l’API Canvas, toujours en JavaScript, vous avez une image, vous allez apprendre à prendre des pixels, à les copier à un autre endroit dans votre Canvas, vous allez voir c’est très pratique si vous avez fait du développement ActionScript, flash, c’est également très utilisé dans la création de jeux ou d’applications à partir de la même image, on peut créer plusieurs éléments d’une interface ou d’un jeu, là vous allez apprendre à faire la même chose avec Canvas.
Canvas avec JavaScript
Comme je vous l’ai dit, vous pouvez copier des pixels d’une partie d’une image, d’un Sprite, d’une forme, de ce que vous voulez, copier tous les pixels et ainsi vous allez pouvoir créer des effets comme modifier les couleurs d’une image, donc modifier la couleur de certains pixels, créer un rendu en noir et blanc, c’est très intéressants la possibilité de copier et de modifier les pixels et ça permet de réduire également les ressources externes à télécharger, c’est-à-dire, vous chargez en principe une ou plusieurs grandes images mais c’est des sprites et ça contient plusieurs éléments, plusieurs images de votre application vous téléchargez un, deux ou trois gros sprites avec plusieurs éléments et avec copyPixels, ou avec drawimage vous extrayez des parties de ces images vous retravaillez les couleurs, vous faites ce que vous avez à faire en fonction de votre application, de votre jeu, c’est très puissant c’est un chargement beaucoup plus rapide des données donc un affichage plus rapide sur les Smartphones, la tablette ou l’ordinateur de votre visiteur.
Pour récupérer les pixels d’une image déjà vous utilisez la fonction getImageData, donc dans getImageData vous allez récupérer les pixels sur votre image, donc X et Y c’est le point de départ et ensuite la largeur et la hauteur vous récupérez sur une grande image par exemple, juste cette partie, juste cette partie avec X, Y hauteur et largeur, ensuite pour ajouter l’image dans le canvas HTML vous allez utiliser la fonction putImagedata donc getImagedata ça va vous renvoyer un objet image data, que vous renseignez dans putImageData avec les valeurs X, Y, les directions X, Y la largeur et la hauteur donc XY c’est pour positionner la copie donc votre nouvelle image la copie des pixels et tous les autres paramètres, dir X, dir Y, largeur, hauteur, donc je vais vous montrer, donc c’est des directions la largeur, la hauteur, je vais vous montrer tout cela à travers un exemple de code source, plutôt que d’être trop théoriques et de vous ennuyer à tous vous expliquer, je vous montre le résultat graphique visuellement c’est toujours plus simple de comprendre une image vaut mille mots, on passe tout de suite à l’exemple de code source.
Comme d’habitude dans votre fichier HTML, vous intégrez votre fichier CSS, qui est très simple, vous avez également intégré votre fichier JavaScript et vous avez prévu donc là, il y a une image qui est intégrée avec un id pour pouvoir appeler cette image plus facilement et vous avez votre balise canvas juste ici avec un id pour pouvoir l’appeler et là on a créé un bouton donc une balise avec un id canvas distest et un bouton sur le onclic c’est-à-dire cliquez ici pour copier les pixels, ça va appeler une fonction JavaScript, tout simplement. Alors qu’est-ce qui se passe ?
Une fois que les données sont chargées, la fonction draw est appelée, on récupère notre canvas, le contexte, on récupère l’image donc vous avez vu dans les cours précédents que vous pouvez utiliser les images, soit une image qui est déjà dans la page HTML, soit une URL d’une image donc soit du même domaine, soit d’un autre domaine et donc là on utilise une autre technique pour vous montrer en pratique ce que ça donne, une image qui est déjà dans la page, en l’occurrence cette image qui déjà dans la page HTML. Une fois qu’on a récupéré l’image on définit ce que l’on comprend dans l’image, on prend qu’une partie de l’image, on ne prend pas toute sa largeur, pas toute sa hauteur, qu’une partie, et qu’est-ce qu’on fait, on modifie la couleur de l’image, simplement et après on écrit l’image dans le canvas, alors qu’est-ce que ça donne ?
On a pris cette partie de l’image là, uniquement celle-là, et on l’a modifiée, la couleur uniquement sur une partie de l’image après sur le reste de l’image, comme l’image d’origine tout simplement comme vous pouvez le voir ici, on parcourt et on modifie notre image. Et juste en dessous on va créer un dégradé donc un dégradé tout simple, voilà un dégradé très simple, si vous le souhaitez je peux rajouter une couleur intermédiaire, on va mettre du gris en intermédiaire comme couleur, voilà, comme ça, ça vous montre, c’est un petit peu comme les cours précédents, ça vous montre le fonctionnement du dégradé, donc là il y aura une couleur grise en intermédiaire qui est ici simplement, je vais l’agrandir encore plus, voilà il y aura plus de gris ici, et après qu’est-ce qu’on fait ?
Là je vais prendre image, je vais modifier l’image complète, ici, voilà, donc l’image complète on modifie toutes les couleurs de l’image entièrement, tout simplement, c’est grâce à ce petit algorithme ou on travail directement sur les pixels, sur la couleur et la copie, à oui je vais vous montrer que la copie fonctionne bien, je prends qu’une seule partie, donc dans la copie d’un pixel qu’est-ce qu’on fait, on prend name canvas, qui est ici simplement, on récupère notre contexte, on fait un get image data, on récupère notre image et on put l’image data donc on récupère une partie de notre image qui est dans le canvas, en fait, X 100, Y0, 90 en largeur, 300 en hauteur et on remet l’image donc on a copié des pixels ici, voilà tout simplement, c’est positionné là et on a pris une partie de l’image donc le logo, si je recharge la page, vous voyez qu’il n’y à qu’une seule partie de l’image qui est modifiée au niveau des couleurs, je clique sur copier pixels, vous avez exactement la même chose, regardez bien, copie des pixels on se déplace à 100, on descend, on on part de zéro donc 100 X 0, on descend de 90 sur le côté droit et on descend de 300 ici, on se positionne là ici, et on descend. On prend cette partie-là, ça vous montre la copie de pixels donc dans un premier temps on a pris une image existante, je répète pour que vous compreniez bien le concept, on a pris une image existante, on en a pris une partie, on l’a dessinée, on a pris ensuite une partie de l’image donc getImage, pareil getImage, putImage put image, on a modifié les pixels et on a mis l’image donc on a modifié cette zone-là, et on a recopié l’image, et là pareil, pour copier des pixels on prend une partie de l’image seulement et on la recopie juste ici, ça fait que si je supprime ça, voilà, c’est que des pixels modifiés qui vont être copiés, bien évidemment, vous avez ça, copier les pixels voilà, ils sont tous modifiés, je remets comme c’était avant voilà, je relance la copie donc ça vous ouvre tout un tas de possibilités la copie des pixels vous pouvez très mettre des Sprite ici donc vous chargez une seule image, que ce soit pour votre application ça contient toutes les icônes, si c’est pour votre jeu ça contient une partie des graphistes, et ensuite vous faites des copies de pixels, des icônes dans le menu par exemple ou dans votre page là ou vous en avez besoin dans votre Canvas c’est très puissant la copie des pixels donc maintenant à vous de l’utiliser, ce n’est pas très compliqué, juste en deux lignes de code à chaque fois, deux, trois lignes de code vous pouvez utiliser la copie des pixels vous pouvez même les modifier à la volée, donc voilà c’est à vous de jouer maintenant.
Votre plan d’actions !
Maintenant c’est à vous de jouer vous avez vu les nouvelles possibilités de l’API Canvas, c’est assez puissant la copie pixels, la modification de de pixels, d’image en direct donc tout ça grâce à l’API Canvas, vous voyez qu’avec JavaScript vous pouvez créer des jeux vidéo très poussés, des applications très évoluées, il faut juste faire attention des tests sur la ressource, les ressources mémoire processeur disponibles sur les tablettes et les Smartphones, bien évidemment donc comme d’habitude vous retrouverez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez les directement sous cette vidéo, quant à moi je vous invite à regarder la deuxième vidéo, vous allez de simplement cliquer ici sur le lien, sur l’image, lancer la vidéo deux, dans la deuxième vidéo je vous donne des stratégies très avancées pour développer deux à trois fois plus rapidement des applications toujours performantes qui s’affichent correctement sur tous les navigateurs que ce soient sur les Smartphones, les tablettes ou les ordinateurs de bureau, vous avez même la possibilité de me poser toutes vos questions, moi je vous réponds avec des cours détaillés, des exemples de code source pour répondre à votre cas spécifique, donc je vous explique tout ça en détail dans la deuxième vidéo, cliquez simplement sur ce lien, sur l’image, lancer la deuxième vidéo. Je vous trouve tout de suite dans la deuxième vidéo pour vous aider, pour répondre à toutes vos questions, je vous dis à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger l’exemple de la vidéo
Retrouver le code source commenté qui vous a été présenté dans la vidéo
Téléchargement du code source Canvas JavaScript Copie Pixel
