Apprenez à importer une image dans Canvas et à la manipuler à travers différentes méthodes.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les images avec Canvas en JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu expert en développement applicatif, on continu ensemble le développement sur les terminaux mobiles et notamment l’utilisation de l’API Canvas avec JavaScript donc si vous n’avez pas vu les derniers cours, cette API vous permet de créer des formes, des dessins directement dans le document HTML donc grâce à JavaScript, simplement et donc dans cette vidéo, vous allez apprendre à manipuler les images.
Canvas avec JavaScript
On peut les intégrer, une image qui provient d’un autre site, une image qui est déjà dans la page HTML, on peut extraire une partie d’une image, zoomer sur une partie d’une image, on peut faire énormément de choses avec l’API Canvas. Comme je vous l’ai dit vous pouvez importer une image soit qui est déjà dans le document HTML soit une image qui appartient à un autre domaine ou alors au même domaine et ainsi l’image importée dans votre fichier Canvas va faire partie intégrante de la zone canvas que vous avez déterminée et vous allez pouvoir la manipuler à travers différentes méthodes.
Je vous ai listé ici, juste sur le document Powerpoint la présentation, toutes les solutions pour importer des images donc en utilisant une image de la page HTML, simplement avec document getElementById, tout ce qui est un getElementByTagName, et vous pouvez importer une image en faisant une recherche dans la liste des images avec la fonction document.image et là vous récupérez un tableau, avec l’identifiant du tableau vous récupérez votre image, ou getElementByTagName, comme je vous l’ai dit, en appelant une image directement via son URL donc soit elle est sur le même domaine, soit elle est sur un autre domaine et en utilisant aussi vous pouvez utiliser une image qui provient d’un autre Canvas, vous avez plusieurs API Canvas balise canvas sur votre page Web et vous pouvez importer des images qui proviennent d’autres Canvas, et vous pouvez également, ça c’est pas mal, utiliser une image encodée en base 64 dans les cours précédents vous avez appris à encoder des images en base 64 directement dans le fichier CSS pour éviter les appels répétés au serveur et donc optimiser l’affichage, l’affichage plus rapide sur les terminaux mobiles.
Vous avez à votre disposition plusieurs fonctions JavaScript notamment drow image qui contient les paramètres suivants, l’image c’est l’image source que vous avez apportée des différentes manières que je viens de vous présenter, la position X et la position Y c’est la position de l’image sur l’axe X et sur l’axe Y pour en extraire une partie, vous avez votre image, si vous voulez extraire seulement cette partie vous définissez position X, position Y avec dimension width et dimension height, c’est la largeur et la hauteur pour extraire une image, X et Y vous les positionnez dans votre image, par exemple ici, la largeur et la hauteur, largeur, hauteur, pour extraire une partie de votre image ou alors pour effectuer un zoom vous pouvez effectuer zooms et des rétrécissements sur une image tout simplement, avec ces deux paramètres, ensuite vous avez X et Y c’est les coordonnées de l’image que vous allez créer à positionner sur votre canvas et vous avez widht et height c’est la largeur et la hauteur de l’image dessinée donc sur votre canvas tout simplement.
La fonction comme vous le voyez, la fonction drawImage vous permet, vous offre énormément de possibilités avec des images vous pouvez, par exemple, utiliser une image source pour en créer une miniature notamment dans les diaporamas photos, souvent si vous créez un diaporama photo avec l’API canvas vous avez des miniatures de vos images, vous utilisez draw image, vous pouvez également extraire une partie seulement de l’image source, donc vous avez une image source, vous en prenez une partie seulement donc par exemple vous avez des Sprite qui contiennent plusieurs images ou des animations de la même image, vous extrayez les parties de cette image donc vos sprites, vous pouvez le faire avec canvas, si vous connaissez l’action script flash c’est également possible et vous pouvez effectuer un zoom ou un rétrécissement, soit sur toute l’image, soit sur une partie seulement de l’image donc c’est également très intéressant de ce côté-là.
Voir les exemples JavaScript
Le mieux c’est que vous voyez tout cela à travers un exemple de code source, vous allez voir toutes ces possibilités donc c’est parti pour l’exemple de code source.
Voici un exemple concret d’utilisation de l’API Cnavas en JavaScript avec une image donc comme d’habitude vous appelez votre fichier JavaScript, vous avez votre fichier CSS qui n’a pas changé donc CSS très basique pour une application mobile, mais en même temps compatible pour un ordinateur de bureau ou une tablette, et ici vous avez votre balise canvas qui est juste là avec une taille et un id, alors pour utiliser une image, déjà ça vous connaissez, je vais aller assez vite on récupère la balise convas, on créé un contexte pour dessiner en 2D notre dessin avec canvas, on créé un objet image et on spécifie l’URL source de l’image donc moi j’ai pris une URL donc vous pouvez soit créer une image vous avez plusieurs possibilités comme je vous ai expliquez dans cours là, vous allez découvrir la possibilité d’utiliser l’URL d’une image existante et qu’est-ce que vous faites, vous récupérez la zone de l’image pour la dessiner, entièrement donc la c’est la taille de l’image que vous allez zoomer et je vous montre l’image en taille, donc ça c’est l’image en taille normale et ça c’est l’image qui est zoomée, donc là on effectue un zoom de l’image sur la largeur et sur la hauteur, sur la même image donc le même objet image on va prendre une partie de l’image, en extraire une partie, de 100 pixel par 120 pixels donc vous avez tous les paramètres que je vous ai expliqué dans le cours et qu’est-ce que ça donne ?
En fait on extrait uniquement la partie logo de l’image donc ça c’est l’image d’origine avec le draw image, ici vous avez effectué un zoom de l’image sur la largeur et sur la hauteur, ce qui vous donne ceci, le zoom, je vous montre les deux images en parallèle et ensuite vous avez pris un extrait de l’image donc là on se déplace sur les X et sur les Y, toujours la même le même objet image, on spécifie la hauteur, la largeur et l’endroit où on va la mettre, ce qui donne ça, tout simplement donc voilà je vous renvoie au cours pour bien comprendre tous les paramètres donc X, Y pour positionner l’image, la taille et du coup ça vous permet à partir de la même image grâce à l’API canvas vous pouvez zoomer sur une image ou en extraire une partie donc c’est très puissant, vous avez une seule image qui prend de la ressource mémoire dans vos tablettes, dans votre Smartphone et ensuite à partir de cette image donc ça peut être typiquement utilisé pour des sprites, vous avez une grande bannière qui contient plusieurs images par exemple les animations d’un personnage quand il court, quand il bouge, d’un héros ou d’une voiture dans un jeu de course, ou toutes les icônes de votre application donc chargez ici un seul objet image et à chaque fois que vous avez besoin d’une image particulière vous faites un extrait de l’image, donc vous extrayez par exemple, vous avez besoin du dé, vous extrayez juste le dé, vous pouvez mettre toutes les lettres de l’alphabet ici dans votre bannière et vous extrayez lettre par lettre pour construire un mot, une phrase avec uniquement des images. Voilà un exemple encore vraiment très simple, très pratique, que ce soit pour vos applications sur Smartphone, sur tablettes ou ordinateur bureau ou pour vos jeux vidéo.
Votre plan d’actions !
Maintenant c’est à vous de jouer donc à vous d’utiliser l’API canvas pour dessiner vos formes, pour créer les graphismes de votre jeu vidéo, des graphismes plus poussés dans vos applications notamment sur les mobiles, vous retrouverez le code source en téléchargement sous ce cours vidéo, comme d’habitude, et si vous avez des questions posez les directement là, sous cette vidéo, l’équipe la développement facile vous répondra, en attendant moi je vous invite à aller beaucoup plus loin c’est-à-dire cliquez ici il y a une image, un lien juste au-dessus de moi là, je vous invite à cliquer dessus pour aller dans la deuxième vidéo, dans la deuxième vidéo vous allez aller beaucoup plus loin dans le développement d’applications en JavaScript, HTML 5, vous allez découvrir les frameworks, vous allez pouvoir me poser toutes vos questions et je vous réponds directement avec un exemple de code source, c’est dans la deuxième vidéo cliquez simplement sur le lien ici pour développer deux à trois fois plus rapidement des application compatibles avec les tablettes, les Smartphones, les ordinateurs de bureau, je vous explique tout ça dans la deuxième vidéo à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’utilisation des images avec l’API JavaScript Canvas
Retrouver le code source commenté de l’exemple vu dans la vidéo
Téléchargement du code source Images JavaScript Canvas
