Comment afficher une image (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
L’élément zone de dessin correspond à la zone d’un document HTML sur laquelle il est possible de générer des illustrations graphiques (animations, jeux...) en JavaScript. Cette rubrique explique la procédure à suivre pour afficher une image à l’aide de l’élément zone de dessin.
Prérequis
Cette rubrique part du principe que :
- vous savez créer une application élémentaire du Windows Store en JavaScript qui utilise le modèle Bibliothèque Windows pour JavaScript ;
- vous connaissez les bases des langages HTML et JavaScript.
Pour obtenir des instructions sur la création d’une application du Windows Store en JavaScript, voir Créer votre première application du Windows Store en JavaScript. Pour obtenir des instructions sur l’utilisation du modèle WinJS, voir Comment obtenir et utiliser le kit de ressources WinJS.
Instructions
Étape 1: Obtenir le contexte de rendu
Avant de dessiner une image sur notre zone de dessin, nous devons obtenir le contexte de rendu à partir de l’élément zone de dessin. Toutes les méthodes et propriétés de la zone de dessin sont définies sur le contexte de rendu. Étant donné qu’à chaque élément <canvas> est associé un contexte de rendu (auquel le nom de variable ctx est souvent donné), nous ne pouvons pas accéder à ce contexte tant que la page n’est pas complètement chargée (c’est-à-dire, tant que l’élément canvas n’est pas entièrement placé dans le DOM). Pour que l’élément canvas soit disponible dans le DOM, vous pouvez, par exemple, placer votre bloc de script au bas de la page, comme il est indiqué ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
.
.
.
</style>
</head>
<body>
.
.
.
<script>
.
.
.
</script>
</body>
</html>
Nous pouvons maintenant obtenir le contexte de rendu, comme suit :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
</script>
</body>
</html>
Comme vous pouvez le constater, l’élément canvas attend une image de 491px sur 538px. Nous obtenons le contexte (ctx) à partir d’une liste de tous les éléments zone de dessin dans le DOM. Puis, nous sélectionnons uniquement le premier élément de zone de dessin et nous obtenons son contexte en appelant getContext('2d').
Étape 2: Charger l’image à afficher
Étant donné que le téléchargement des images sur le client peut prendre un certain temps, nous ne devons y accéder qu’une fois qu’elles ont été complètement chargées. Pour cela, nous pouvons utiliser le gestionnaire d’événements onload des objets d’image, comme suit :
var imageToDraw = new Image();
imageToDraw.onload = function() {
// It is now safe to access the image.
}
imageToDraw.src = 'images/duckCat.jpg';
Dans cet exemple, la fonction anonyme est appelée uniquement une fois que l’image associée (duckCat.jpg) a été complètement chargée.
Étape 3: Afficher l’image
À l’aide du gestionnaire d’événements onload, nous pouvons afficher l’image sur la zone de dessin, comme suit :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
body {
width: 402px; /* Accommodate the 1px canvas borders. */
margin: 0 auto; /* Center the page's content. */
}
h1 {
text-align: center;
}
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<h1>How to display an image using the canvas element</h1>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
var imageToDraw = new Image();
imageToDraw.onload = function() {
ctx.drawImage(imageToDraw, 0, 0);
}
imageToDraw.src = 'images/duckCat.jpg';
</script>
</body>
</html>
Remarques
La méthode drawImage accepte plus de paramètres que ceux indiqués dans l’exemple précédent et est très puissante. Pour plus d’informations, voir Utilisation d’images sur le site Web Réseau des développeurs Mozilla.