Table des matières:
Vidéo: HTML - Insérer une image dans une page web 2025
Alors que HTML supporte depuis longtemps les images, l'interface canvas de HTML5 ajoute une nouvelle vie aux images Web. Les images peuvent être affichées à l'intérieur d'une toile, où elles peuvent être intégrées aux techniques de dessin vectoriel de l'API canvas. Vous pouvez également sélectionner une partie d'une image à afficher et appliquer différentes transformations à votre image pour créer des compositions et des animations intéressantes.
Cette figure montre une image dessinée deux fois sur un élément de canevas.
Dessiner une image sur le canevas HTML5
La manière la plus simple d'utiliser une image dans un canevas est d'utiliser une image déjà disponible sur la page Web. Vous pouvez placer une image sur la page avec la balise ordinaire
Canvas non supporté
Le code JavaScript suivant affiche l'image dans le canevas:
function draw () {var drawing = document. getElementById ("dessin"); var con = dessin. getContext ("2d"); var goofyPic = document. getElementById ("goofyPic"); con. drawImage (goofyPic, 0, 0, 50, 50); var image2 = nouvelle Image (); image2. src = "andyGoofy.gif"; con. drawImage (image2, 100, 100, 70, 50);} // fin dessine
Voici comment faire:
-
Créez l'image dans la page principale.
Le moyen le plus simple d'accéder à une image est d'utiliser du HTML ordinaire pour intégrer l'image dans la page principale. Si vous le souhaitez, vous pouvez masquer la balise
avec le code CSS (display: none) afin que seule la version dans le canevas soit visible. -
Créez une variable JavaScript pour l'image avec le document. Le mécanisme getElementByID ().
-
Dessinez l'image sur le canevas avec la fonction drawImage () .
Le premier des cinq paramètres est le nom d'un objet image. (Il doit s'agir du nom d'un objet image JavaScript, pas seulement du nom de fichier d'une image.) Les deux paramètres suivants sont les valeurs X et Y du coin supérieur gauche de l'image, et les deux derniers paramètres sont la taille de l'image (largeur et hauteur).
-
Créez un objet JavaScript Image .
Si vous ne souhaitez pas incorporer une image dans la page, vous pouvez utiliser JavaScript pour créer une image dynamiquement. Utilisez le nouveau constructeur Image () pour créer une nouvelle image.
-
Modifiez la propriété src de l'image.
Si vous créez une image JavaScript, vous devez spécifier l'attribut src pour indiquer le fichier associé à l'image.Le chargement de l'image peut prendre un certain temps.
L'image ne s'affiche pas tant qu'elle n'est pas chargée depuis le serveur. Dans la plupart des cas, cela ne posera pas de problème, mais vous devrez parfois retarder votre programme jusqu'à la fin du chargement de l'image. L'objet Image a une propriété onload qui accepte une fonction de rappel. Utilisez cette technique pour attendre que votre dessin se termine:
image. onload = finishDrawing; function finishDrawing () {// reste du code du dessin va ici}
Dessiner une partie d'une image sur la toile HTML5
Parfois, vous voulez dessiner une petite partie de l'image originale. Un programme qui se concentre sur le centre du visage maladroit ressemble à ceci:
Il est assez facile de dessiner une partie d'une image. Utilisez la même commande drawImage (), mais cette fois utilisez une version avec neuf paramètres:
con. drawImage (goofyPic, 60, 70, 90, 90, 0, 0, 150, 150);
Voici ce que signifient tous ces paramètres:
-
Nom de l'image: Le premier paramètre est l'objet image (pas le nom de fichier, mais le nom de l'objet Image JavaScript).
-
Coin supérieur gauche de la source: Le premier travail consiste à choisir la partie de l'image originale à afficher. Les deux paramètres suivants indiquent le coin supérieur gauche d'une sélection sur l'image originale. (Vous pouvez utiliser un éditeur d'image comme Gimp ou IrfanView pour déterminer la position et la taille de la sélection.)
-
Hauteur et largeur de la source: Les deux paramètres suivants indiquent la hauteur et la largeur de la sélection de la source.
-
Position de destination: Les deux paramètres suivants sont la position du coin supérieur gauche de l'image sur le canevas.
-
Taille de destination: Les deux derniers paramètres décrivent la hauteur et la largeur de l'image de destination sur le canevas.
La technique de sous-image décrite ici est très utile car elle vous permet de combiner plusieurs images en une seule image (parfois appelée feuille de sprite). Cela diminue les frais généraux pour la livraison de l'image. (Une grande image est plus rapide à livrer que plusieurs petites.) Elle est également fréquemment utilisée dans les jeux et les animations où une entité peut avoir plusieurs images affichées en séquence pour suggérer de marcher ou d'attaquer.
