Dans cette leçon vidéo, l’auteur montre comment charger et afficher des images et des vidéos dans un élément HTML5 canvas à l’aide de l’API Canvas. Après avoir créé la balise `<canvas>` et récupéré son contexte 2D, il crée un objet `Image`, définit son attribut `src`, puis utilise `drawImage` pour dessiner l’image. Il explique d’abord l’usage simple à trois paramètres (image, x, y) qui place l’image à sa taille native, puis le mode avancé à huit paramètres qui permet de sélectionner une zone source, de redimensionner et de placer le rendu dans une zone destination du canvas. Le problème de chargement asynchrone est illustré : la première tentative d’affichage échoue tant que l’image n’est pas encore disponible. Deux solutions sont proposées : pré‑charger l’image via une balise `<img>` masquée ou retarder l’appel JavaScript avec `setTimeout`. L’intégration d’une vidéo suit le même principe : création d’un élément `<video>` (source MP4), ajustement du canvas aux dimensions de la vidéo (`videoWidth`, `videoHeight`), sélection d’un instant précis avec `currentTime`, mise en sourdine avec `volume`, puis appel de `drawImage` sur l’objet vidéo. Le chargement de la vidéo est géré de façon similaire (temporisation ou callback). Enfin, l’auteur montre comment transformer la vidéo en animation sur le canvas : il joue la vidéo (`play`) et, à l’aide de `setInterval`, capture périodiquement le cadre actuel avec `drawImage`. Il ajuste la fréquence d’intervalle (de 1 s à 20 ms) pour obtenir une animation fluide, change la source vidéo, redimensionne dynamiquement le canvas et masque l’élément vidéo via CSS. La leçon se conclut par un rappel des bonnes pratiques pour importer des médias dans le canvas, utiles pour des projets web interactifs.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon sur l'API Canvas. Aujourd'hui, nous allons voir comment importer des images et des vidéos dans l'espace de travail. Je vous mettrai en description des liens vers des sites où vous pouvez télécharger des images et des vidéos de qualité gratuite. Après avoir créé la balise Canvas, j'ai déclaré un code JavaScript qui au chargement de la page va créer le contexte de rendu. Afin d'insérer une image dans l'espace de travail, il faut déjà commencer par créer l'objet image comme ceci. Ensuite, on va spécifier la source de cette image, par exemple arbre.jpg. Il s'agit de cette image. La méthode qui permet d'insérer l'image dans l'espace de travail s'appelle drawImage, qui peut renfermer au moins 3 paramètres, à savoir l'identifiant de l'image que l'on veut insérer, im dans ce cas, puis les coordonnées du commencement de l'application de l'image sur l'espace de travail. On met par exemple 0, 0 pour dire l'abscisse 0 et l'ordonnée 0 sur l'espace de travail, c'est-à-dire qu'à partir de ce point on va appliquer notre image. Exécutons. Vous avez constaté qu'au premier chargement l'image n'est pas appliquée. C'est uniquement au deuxième chargement que l'image est apparue et c'est normal parce qu'il faut déjà que l'image soit disponible sur le navigateur afin qu'il soit intégré au canvas. Il existe une solution, c'est de créer la balise img qui contient la source concernée puis avec du CSS on va juste masquer cette image. Comme ça l'image sera déjà chargée sur le navigateur et on n'aura plus de problème. Mais pas la peine de faire ça pour le moment. Vous avez constaté que l'image est affichée avec la taille réelle. Le point 0, 0 du commencement, c'est ça. Et l'image est conservée avec sa taille réelle, c'est-à-dire qu'elle sera découpée sur la largeur et sur la hauteur pour n'en conserver que la partie qui va coller avec l'espace de travail. Sinon, on peut spécifier des paramètres supplémentaires. Alors, le premier paramètre, c'est toujours l'identifiant de l'image que l'on veut insérer. Maintenant, les 4 arguments qui vont suivre concernent l'image source, c'est-à-dire l'image que l'on veut insérer On va encore mettre 0, 0, mais attention cette fois 0, 0 ne signifie pas des coordonnées sur l'espace de travail mais sur l'image source que l'on veut insérer. C'est-à-dire que je veux commencer la copie à partir du point haut à gauche de cette image. Ensuite j'ai spécifié les dimensions que je veux importer, c'est-à-dire que je veux importer 1000 pixels sur 1000 pixels en largeur et en hauteur. Autrement dit l'image sera redimensionnée pour qu'elle soit adaptée à l'espace de travail. Les 4 derniers paramètres dans ce cas concernent l'espace de travail lui-même. 0, 0 pour dire que la copie sera appliquée à partir du point haut à gauche de la balise canvas et les dimensions que je vais appliquer c'est 600 sur 600, c'est-à-dire les mêmes que j'ai appliquées avec du HTML, pour dire que je veux couvrir l'espace total avec l'image, ou plutôt avec les 1000 premiers pixels de l'image sur la largeur et sur la hauteur. Exécutons. Maintenant on peut voir une plus grande partie de l'image dans l'espace de travail. Donc il suffit de jouer sur ces paramètres afin de mieux personnaliser votre affichage. Je vous recommande cette deuxième méthode parce qu'elle vous permet de mieux manipuler votre image au lieu de vous contenter de 3 paramètres seulement. Alors ça c'est ce qui concerne l'intégration de l'image. De la même façon on peut intégrer une vidéo à notre espace de travail parce qu'à la fin une vidéo n'est rien d'autre qu'une séquence d'images qui s'affichent successivement. Dans ce cas, on a besoin de déclarer la balise vidéo qu'on a vu en HTML5, identifiée par vidéo. Et comme source, j'ai sélectionné une vidéo avec l'extension MP4. Bien sûr, il faut être conscient que les extensions ne marchent pas de la même manière sur tous les navigateurs. Mais MP4, c'est quand même un format qui est presque standard. On spécifie la largeur de préférence, par exemple 200 pixels. Alors exécutons déjà. Alors on a l'espace de travail ou bien la balise canvas et la vidéo qui est intégrée juste à côté. Bien sûr, après je vais faire disparaître cette vidéo afin de ne laisser place qu'à la balise canvas, mais il est bien de la conserver quand même pour mieux comprendre ce qui se passe. Alors là, j'ai pas vraiment besoin d'image, alors je vais retirer cette ligne. Par contre, je vais créer l'objet vidéo que j'appellerai vi. Dans ce cas, il est préférable de redimensionner notre canevas proportionnellement avec les dimensions de la vidéo. Donc voilà ce qu'on va faire. La largeur du canevas initialement spécifiée à 600 pixels maintenant deviendra vi.videoWidth, c'est-à-dire la largeur de la vidéo. Même chose pour la hauteur. L'objectif en fait, c'est d'afficher une image de la vidéo, donc il faut spécifier le moment souhaité. On va par exemple faire ceci. L'attribut currentTime permet de spécifier l'instant voulu. Dans ce cas, c'est l'instant 2 secondes. Alors c'est l'image à l'instant 2 secondes qui est concernée par la balise canvas. Dans ce cas, n'oubliez pas que la vidéo qui est affichée ici, après on va la faire disparaître, mais si jamais vous l'exécutez, alors il y aura le son qui va se produire aussi. Alors vaut mieux retirer le son avec l'attribut volume qu'on spécifie à 0. L'opération qui reste maintenant, c'est afficher l'image instantanée. Alors la méthode c'est la même, drawImage, avec les propriétés voulues de la même façon, sauf que l'objet dans ce cas ce n'est pas l'image mais c'est la vidéo. Alors on va commencer l'extraction à partir du point haut à gauche de la source, exactement comme pour l'image. On va extraire la largeur totale de la vidéo, c'est ça, et la hauteur totale aussi. Et pour la destination, c'est-à-dire pour la balise canvas, on va faire pareil pour l'image. On commence à la position 0, 0 et on veut que la vidéo s'étale sur la totalité du canvas. Alors ça sera les mêmes dimensions. Alors exécutons. Alors la vidéo s'est bien affichée comme on le souhaite. On voit que l'espace de travail est devenu beaucoup plus gros. Alors on va le réduire un peu. Alors par exemple on va diviser par 2. Et pareil ici. Réexécutons. Alors là c'est mieux. Maintenant on peut faire disparaître la vidéo qui est à côté. Juste avec un style CSS. On mettra none. Voilà ce que ça donne. Maintenant on va changer l'instant, par exemple mettre à l'instant 10 secondes. On constate que l'image ne change pas et c'est tout à fait naturel parce que même chose que pour les images, la vidéo demande du temps pour qu'elle soit chargée sur le navigateur. Alors tant qu'elle n'est pas entièrement chargée, le JavaScript ne peut pas suivre. Alors on va retarder un peu l'exécution du JavaScript pour laisser place au chargement total de la vidéo. On va juste temporiser cette instruction à l'aide de la méthode setTimeout qu'on a déjà vu en JavaScript. On mettra une fonction anonyme de préférence. Tout ça, ça sera dans la fonction. Et la durée par exemple, c'est, on va mettre 600 millisecondes. J'estime que c'est largement suffisant pour laisser place au chargement de la vidéo sur le navigateur. Alors exécutons. Là c'est mieux, on constate bien que l'instantané de l'image correspond bien au moment souhaité. Il y a juste un truc, c'est que cette méthode n'est pas très propre. En fait, il serait mieux de passer par la fonction du callback, ou bien la fonction de rappel, qui va pas s'exécuter instantanément mais qui va attendre la fin de l'exécution de quelque chose qui vient avant. Mais bon, pour nous on va se contenter de cette technique puisque ça marche. De la même façon, on peut changer de source. De toute façon, l'image va s'adapter parce qu'on a bien spécifié les dimensions qui sont dynamiques. Par exemple, la vidéo numéro 1, ça donne ça. Numéro 3, je fais que changer la source. Numéro 2, etc. Maintenant que ça marche, on va faire un petit exemple pratique. On va carrément créer une vidéo dans l'espace de travail du Canvas. Comme j'ai mentionné tout à l'heure, une vidéo n'est rien d'autre qu'une succession d'images. Alors là, on va juste réexécuter un bout de code JavaScript de manière périodique, de telle sorte à ce qu'il puisse traquer le changement de la vidéo pour importer l'image instantanée. Alors on va réafficher la vidéo, on aura ça. Maintenant, quand j'aurai cliqué sur le canvas, je vais exécuter la vidéo avec une fonction qui s'appelle play, par exemple, que je vais créer ici. Je vais spécifier l'objet vidéo avec la méthode play disponible en JavaScript. On exécute. Dans ce cas, la vidéo va tourner. Je veux maintenant traquer le changement des images afin de les rapporter ici. Pour ça, je vais créer une fonction qui va se rappeler périodiquement, que j'appellerai f tout simplement, et c'est elle qui contiendra ce code. Mais là, pas la peine de retarder l'exécution, alors on enlève ça. On aura que ce code. Maintenant, je vais rappeler périodiquement cette fonction à l'intérieur de play grâce à la méthode setInterval. La fonction, c'est f, et la durée, par exemple, c'est, on va dire, 1 seconde. Dans ce cas, chaque seconde, je vais afficher un instantané. Bien sûr, ça va créer une animation qui est saccadée. Là, bien sûr, j'ai plus besoin de ce currentTime, je vais l'enlever. Réexécutons. Alors on constate que les images changent chaque seconde. Bien entendu, on peut améliorer le rendu. Il suffit d'accélérer la cadence d'affichage pour avoir une vraie vidéo. Dans ce cas, je vais mettre ici par exemple 20 millisecondes. Alors là, c'est plus rapide. Et voilà, c'est presque une vidéo parfaite. Maintenant, je peux faire disparaître la vidéo à côté, comme ça. Alors là, c'est mieux. On peut changer de source. Par exemple, vidéo 1, ou encore la vidéo 3. Vous avez vu comment l'espace de travail s'adapte automatiquement avec les dimensions de la vidéo. J'espère que vous avez compris comment faire pour intégrer une image ou bien une vidéo dans l'espace de travail. Bien entendu, cette pratique est très utile dans certains projets web. Merci pour votre attention et à la vidéo prochaine.
