Insertion d'une image dans un canevas

Dans cette page je vais vous montrer comment insérer une image matricielle dans un canevas.
Il peut s'agir d'une image déjà présente dans la page ou d'une image nouvelle.

Insertion dans le canevas d'une image de la page

L'image à insérer dans le canevas est une image de la page (et l'unique d'ailleurs ...).

Ci-dessous l'image à insérer :

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.

Le code correspondant

... <p>Ci-dessous l'image à insérer : <img src ="../images/brune_nue.jpg" width ="15%"> <p>Ci-dessous le canevas avec cette image insérée deux fois : <canvas width ="900" height ="600" style="width: 100% ; height : auto; background: linear-gradient(to right, red, orange, white ) ;"> </canvas> ... window.onload =function() { var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X=canevas.width; var Y=canevas.height; var image = document.querySelector('img'); contexte.drawImage(image,0,0,X/3,Y/3) ; contexte.drawImage(image,X/2,Y/2,X/2,Y/2) ; } ...

HTML & CSS

Les dimensions d'affichage du canevas sont 100% et auto mais pour le script le canevas fait 900 par 600 donc aussi un ratio de 1,5 entre largeur et hauteur.
Le canevas a pour fond un superbe dégradé réalisé en CSS.

Script

Les variables X et Y vont respectivement contenir 900 et 600.

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.
Dans le premier cas l'image est insérée en haut à gauche et dans le deuxième cas au milieu du canevas.
Dans les deux cas l'image est réduite mais avec respect des proportions ; toujours le ratio 1.5 entre largeur et hauteur afin que l'image ne soit pas déformée lors de l'insertion.
Notez que les paramètres de la méthode drawImage sont exprimées par rapport à X et Y.

Si vous essayez d'appeler drawImage avant le chargement de la page (et en particulier de l'image) il ne se passera rien !!!
Il faut donc appeler cette méthode sur chargement de la page (ou de l'image).

Insertion d'une image nouvelle

Imaginons que l'image "brune_nue.jpg" ne soit pas un élement de la page.
Il aurait alors fallu remplacer l'instruction :

	var image = document.querySelector('img');

Par :

	var image =new Image(); // nouvelle instance de l'objet image
	image.src ="../images/brune_nue.jpg" ; // source de cette instance

Le reste du script inchangé !
Retour menu