Canvas : incorporation d'une image dans le canevas
Dans cette page je vais vous montrer comment insérer une image matricielle existante dans un canevas.
Il peut s'agir d'une image faisant déjà partie du DOM de la page (ou non).
Insertion dans le canevas d'une image du DOM
L'image à insérer dans le canevas est déjà une image de la page (et l'unique d'ailleurs ...).
Image unique de la page ci-dessous:
Ci-dessous le canevas avec cette image insérée deux fois :
Dimensions natives de l'image 900 par 600 donc un rapport de 1,5 entre largeur et hauteur.
La même image bitmap est insérée deux fois mais à des endroits différents et avec des dimensions différentes ; première fois avec sa taille d'origine et une deuxième fois avec une réduction (mais respect des proportions : 450 par 300).
Le code HTML
L'image "brune nue" existe déjà dans le DOM !
Le script correspondant
var image = document.querySelector('img'); // cibler image unique de la page
window.onload =function()
{
var canevas = document.querySelector('canvas');
var contexte = canevas.getContext('2d');
var X=canevas.width;
var Y=canevas.height;
contexte.drawImage(image,0,0) ; // insertion image en haut à gauche avec sa taille d'origine.
contexte.drawImage(image,X/2,Y/2,X/2,Y/2) ; // insertion image dans le milieu du canevas avec réduction
// ici le script pour remplir le deuxième canevas : voir ci-dessous !
}
...
Si vous essayez d'appeler drawImage avant le chargement de la page il ne se passera rien !!!
Il faut donc appeler cette méthode sur chargement de la page.
La méthode doit donc être dans une fonction anonyme appelée lors du chargement de la page : window.onload =function()
L'image est insérée deux fois dans la zone de dessin mais à des positions différentes via une fonction qui est déclenchée dès que la page est chargée.
Pour les deux insertions on utilise la fonction drawImage avec cinq paramètres : instance objet Image, x, y
(x et y étant les coordonnées de l'image dans le canevas), largeur et hauteur de l'image dans le canevas.
Les deux derniers paramètres de la méthode sont facultatifs ; dans ce cas l'image est insérée avec ses dimensions natives. C'est le cas
de la première insertion (qui occupe donc tout le canevas).
Insertion dans un canevas d'images trouvées sur la toile
Rien n'interdit d'insérer des images trouvées sur la "toile".
Naturellement les images ne s'afficheront que si vous disposez d'une connection internet.
Exemple
Ci-dessous le deuxième canevas de cette page avec insertion de deux minuscules images récupérées sur un site.
Le code HTML
La balise Canvas est un élément HTML de la page, donc on peut lui appliquer toutes les propriétés CSS relatives aux boites HTML !
Ici la boite Canvas est remplie avec un superbe dégradé linéaire CSS et dispose d'un ombrage et d'angles arrondis.
Le script correspondant
// créer deux objets de type image
var lune =new Image();
var terre = new Image();
lune.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
terre.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
window.onload =function()
{
// ici le script pour remplir premier canevas
...
// ci-dessous script pour remplir deuxième canevas
var canevas2 = document.querySelectorAll('canvas')[1];
var contexte2 = canevas2.getContext('2d');
var X2 = canevas2.width;
var Y2 = canevas2.height;
contexte2.drawImage(terre,0,0,200,200) ;
contexte2.drawImage(lune,X2/2,Y2/2,50,50) ;
}
Nouveautés dans le script : création de nouvelles instances de la classe Image.
En effet comme ces deux images ne sont pas dans le DOM de la page, il faut les ajouter via le script.
Il faut aussi préciser la source de chaque nouvel objet de type Image.
il faudrait faire la même chose pour insérer dans un canevas des images du site mais ne faisant pas partie du DOM
de la page ; le chemin serait alors plus simple ...
Les deux images après avoir été ajoutées au DOM sont insérées dans le canevas avec agrandissement (d'où le flou)
en haut à gauche pour la terre et au milieu pour la lune.