Images sur Canvas
L'une des fonctionnalités de l'élément <canvas> est la possibilité d'utiliser des images. Celles-ci peuvent servir à différents usages. Vous pouvez utiliser des images externes dans n'importe quel format pris en charge par le navigateur (par ex. PNG, GIF ou JPEG). Comme source, vous pouvez également utiliser l'image créée par d'autres éléments <canvas>.
L'importation d'images dans un canvas est un processus en deux étapes :
- Obtenez une référence vers un autre élément
<canvas>ou un objet HTMLImageElement en tant que source. - Dessinez une image sur le canvas à l'aide de la fonction drawImage().
En tant que source d'image, l'API Canvas peut utiliser l'un des types de données suivants :
| Type de données | Description |
|---|---|
| HTMLImageElement | Images créées avec le constructeur Image(), ou tout élément <img>. |
| SVGImageElement | Images intégrées à l'aide de l'élément <image>. |
| HTMLVideoElement | Un élément HTML <video> utilisé comme source d'image capture l'image actuelle de la vidéo et l'utilise comme image. |
| HTMLCanvasElement | En tant que source d'image, vous pouvez utiliser un autre élément <canvas>. |
Ces sources sont regroupées sous le type CanvasImageSource.
Il existe de nombreuses façons d'obtenir des images à utiliser sur un canvas.
Utiliser des images de la même page
Vous pouvez obtenir une référence vers des images se trouvant sur la même page que le canvas à l'aide de l'une des méthodes suivantes :
- La collection document.images
- La méthode document.getElementsByTagName()
- La méthode document.getElementById() si vous connaissez l'ID de l'image à utiliser
Utiliser des images provenant d'autres domaines
En utilisant l'élément <img> avec l'attribut crossorigin="anonymous", vous pouvez demander l'autorisation de charger une image depuis un autre domaine. Si le domaine d'hébergement autorise l'accès inter-domaines via les en-têtes CORS, vous pouvez utiliser l'image dans votre canvas sans l'altérer.
Note Si vous dessinez une image provenant d'un autre domaine sans une configuration CORS appropriée, le canvas devient "tainted" (altéré). Un canvas altéré restreint l'accès à ses données (par ex.,
toDataURL()générera une erreur).
Utiliser d'autres éléments de canvas
Les autres éléments de canvas peuvent être accessibles via la méthode document.getElementById() ou document.getElementsByTagName().
Intégrer une image via une URL de type data:
Les URL de type data permettent de spécifier une image sous forme de chaîne de caractères encodée en Base64 directement dans le code. L'avantage de l'URL de type data est que l'image résultante est immédiatement disponible. Il est également possible de regrouper tout votre CSS, HTML, JavaScript et vos images dans un seul fichier.
Cependant, il existe un inconvénient : l'image n'est pas mise en cache, et l'URL encodée peut devenir trop longue pour les images volumineuses.
Créer une image à partir de zéro
Vous pouvez également créer un nouvel objet HTMLImageElement dans votre script. Pour cela, utilisez le constructeur Image() :
Créer une image à partir de zéro
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'myImage.png';Le chargement de l'image commence lorsque src est défini. Pour garantir que drawImage() n'est appelé qu'une fois l'image prête, utilisez le gestionnaire d'événement onload.
La fonction drawImage()
Une fois une référence vers l'image source disponible, vous pouvez utiliser la méthode drawImage(). Cette méthode possède les variantes suivantes :
- drawImage(image, x, y),
- drawImage(image, x, y, width, height),
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight).
La forme de base est drawImage(image, x, y).
Dans l'exemple suivant, nous utilisons la méthode document.getElementById() pour obtenir une référence vers l'image, puis nous utilisons la fonction drawImage() pour la dessiner.
Exemple de dessin d'une image avec la fonction drawImage() :
Exemple de dessin d'une image avec la fonction drawImage()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Image</h2>
<img id="photo" src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" />
<h2>Image with canvas:</h2>
<canvas id="exampleCanvas" width="240" height="225" style="border:2px solid #cccccc;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("photo");
ctx.drawImage(img, 20, 20);
};
</script>
</body>
</html>DANGER
Les images SVG doivent définir la largeur et la hauteur dans l'élément racine <svg>.
Utiliser des images d'une vidéo
Il est également possible d'utiliser des images (frames) d'une vidéo présentée par un élément <video>, même lorsque la vidéo n'est pas visible. Par exemple, si vous disposez d'un élément <video> avec l'ID "videoCanvas", procédez comme suit :
Exemple de dessin d'une vidéo avec un canvas :
Images sur Canvas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Video</h2>
<video controls id="videoCanvas" controls width="350" autoplay>
<source src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<h2>Canvas draws the current video:</h2>
<canvas id="exampleCanvas" width="310" height="190" style="border:1px solid #d3d3d3;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
var v = document.getElementById("videoCanvas");
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var animId;
function drawFrame() {
ctx.drawImage(v, 5, 5, 300, 180);
animId = requestAnimationFrame(drawFrame);
}
v.addEventListener("play", function() {
animId = requestAnimationFrame(drawFrame);
}, false);
v.addEventListener("pause", function() {
cancelAnimationFrame(animId);
}, false);
v.addEventListener("ended", function() {
cancelAnimationFrame(animId);
}, false);
</script>
</body>
</html>Pratique
Quelles sont les étapes essentielles pour dessiner une image sur un Canvas en HTML ?