Insertion d'une image dans le canevas - les filtres

Dans ce chapitre je vais vous montrer comment insérer une image existante dans un canevas.
Sachez que désormais on peut appliquer aux objets du canevas des filtres avec la syntaxe CSS3.

Insertion dans le canevas d'une image du DOM

Comme vous le voyez ci-dessus, l'image qui est destinée à être insérée dans le canevas apparait déjà dans la page ; donc fait partie du DOM de cette page.

Ci-dessous le canevas avec cette image insérée deux fois dans le canevas.

Si l'image n'apparait pas ; actualisez la page !

Dimensions natives de l'image 900 par 600 donc un rapport de 1,5 entre largeur et hauteur.

La même image est insérée deux fois dans le canevas 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 a été insérée dans la page via la balise IMG avec l'ID "brune" donc fait déjà partie du DOM.
L'élément HTML CANVAS est stylé avec des coins arrondis et un ombrage.

Le script correspondant

function script1()
{
	var image = document.getElementById('brune'); // cibler l'image du DOM
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X =canevas.width;
	var Y =canevas.height;
	contexte.drawImage(image,0,0) ; 
	contexte.drawImage(image,X/2,Y/2,X/2,Y/2) ;
	
	contexte.fillStyle = 'red';
	contexte.textAlign ='center'; 
	contexte.textBaseline = 'middle'; 
	contexte.font = " bold normal 40px arial" ; 
	contexte.fillText('Page réservée aux adultes', X/2, Y/3) ; 
}
script1(); //appel fonction qui remplit premier canevas

Je n'ai pas besoin de charger l'image mais simplement de la référencer.

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 : référence objet, 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).

J'ai ensuite inséré du texte.

Insertion dans un canevas d'images qui ne sont pas dans le DOM

La méthode drawImage() a besoin que l’image ait été complètement chargée pour fonctionner.
Pour s’assurer que c’est bien le cas, on l’utilisera généralement avec un évènement de type load.

Ci-dessous le deuxième canevas de cette page avec insertion de deux images stockées sur mon ordinateur : lune.gif & terre.gif.

Le code HTML

<canvas width ="900" height ="600" 
		style="width: 80% ; height : auto; background : rgba(0,0,0,0.7);  ">
</canvas>

Les images insérées n'ont pas de fond transparent ... mais ça existe pour les formats gif et png. A vous de trouver dans la "toile" des images PNG ou GIF à fond transparent.

La balise canvas est un élément HTML donc on peut appliquer les propriétés CSS dont le raccourci "background'.
Remarque : les images à insérer dans le canevas n'ont pas été chargées via le HTML ; il faut les charger via le script.

Le script correspondant

var lune = new Image();
var terre = new Image();
lune.src = '../images/lune.gif' ;
terre.src = '../images/terre.gif'; 
	
var canevas2 = document.querySelectorAll('canvas')[1]; 
var contexte2 = canevas2.getContext('2d');
// dessin des images après leur chargement
lune.onload =function()
		{ contexte2.drawImage(lune,10,10,50,50) ; }
terre.onload = function()
		{contexte2.drawImage(terre,300,300,200,200) ;}

Notez qu'à chaque fois une fonction anonyme insère l'image dès qu'elle a été chargée.

Insertion d'images sans déformation

Attention si vous ne prenez pas certaines précautions l'image insérée risque d'être déformée.

Ci-dessous un canevas incorporant deux images : la première est entièrement déformée et la seconde respecte les proportions de la source.

Affichez la console !

Le code correspondant

Le canevas fait 300 par 450. La première image fait 900 par 600, la deuxième image fait 400 par 600. Donc la première est plus large que haute et c'est l'inverse pour la seconde.

Le script : ... function insertions() { var canevas = document.getElementById('canevas4'); var contexte = canevas.getContext('2d'); var X =canevas.width; var Y =canevas.height; var brune = new Image(); brune.src ="../images/brune_nue.jpg"; brune.onload =function() { contexte.drawImage(brune,0,0,X/2, Y/2); } var sexy = new Image(); sexy.src ="../images/noire_bikini.jpg" ; sexy.onload =function() { largeur =sexy.width; hauteur =sexy.height; ratio = hauteur /largeur; largeur_fixee = X/2; hauteur_fixee = largeur_fixee * ratio; console.log(largeur); console.log(hauteur); console.log(ratio); contexte.drawImage(sexy,X/2,Y/2,largeur_fixee,hauteur_fixee) ; } // fin fonction anonyme } // fin fonction insertions insertions(); //appel fonction insertion()

La routine pour insérer la deuxième image est un peu plus longue pour la première mais assure aucune déformation de l'image insérée.
Il suffit de récupérer les dimensions de l'image chargée, de calculer le ratio hauteur/largeur, de calculer les dimensions d'affichage dans le respect du ratio.
Les instructions "console.log()" sont provisoires.

Pour désigner les variables j'utilise des termes utilisés déjà pour le premier canevas. Mais il n'y a pas d'ambiguïté car il s'agit ici de variables locales puisque déclarées dans la fonction "insertions".
Lorsqu'une page contient plusieurs canevas, je vous conseille de créer une fonction pour remplir chaque canevas.

Filtre les objets du canevas

Encore une bonne nouvelle. C'est désormais très facile de filtrer les images insérées dans un canevas ; aussi simple qu'en CSS grâce au module CanvasRenderingContext2D.filter.

Exemple 1

Ci-dessous rendu d'un document HTML contenant un canevas qui insère 4 fois la même image : version originale, sépia, floutage, inversion.

Le script : ... var X =canevas.width; var Y =canevas.height; var jolie = new Image(); jolie.src ="../images/jolie_fille.jpg" ; jolie.onload = function() { contexte.drawImage(jolie,0,0, X/2,Y/2); contexte.filter ="sepia(1)"; contexte.drawImage(jolie,300,0, X/2,Y/2); contexte.filter ="blur(3px)"; contexte.drawImage(jolie,0,400, X/2,Y/2); contexte.filter ="invert(1)"; contexte.drawImage(jolie,300,400, X/2,Y/2); } // fin fonction anonyme ...

Si vous connaissez les filtres CSS, vous reconnaissez la syntaxe.

Exemple 2

Il est possible de chainer plusieurs fonctions de filtre.

Ci-dessous rendu d'un document HTML contenant un canevas qui insère une photo deux fois avec à chaque fois deux primitives : floutage et nuance de gris pour la première insertion ; floutage et rotation dans l'axe chromatique pour la deuxième incorporation.

Le script correspondant (extrait) : ... var X =canevas.width; var Y =canevas.height; var jolie = new Image(); jolie.src ="../images/jolie_fille.jpg" ; jolie.onload = function() { contexte.filter = "grayscale(100%) blur(3px)"; contexte.drawImage(jolie,0,0, X/2,Y); contexte.filter = "hue-rotate(270deg) blur(3px)"; contexte.drawImage(jolie,300,0, X/2,Y); }// fin fonction anonyme ...

Notez la valeur de la propriété filter : il suffit de séparer d'un espace les différentes primitives.

Principe du filtrage

Avant qu'on ne puisse appliquer des filtres avec la syntaxe CSS, le filtrage d'une image insérée dans un canevas nécessitait une routine laborieuse ... Dans une boucle il fallait manipuler les différents octets codant l'image.
Chaque pixel de l'image est en effet codé par quatre octets selon le principe de la notation RGBA (ou RVBA) : un octet pour le rouge, un pour le vert, un pour le bleu et un dernier pour l'alpha (transparence). Avec pour chaque octet un entier compris entre 0 et 255.

Imaginons que nous voulions produire le négatif de l'image il fallait retirer à 255 la valeur de chaque composante R,V,B (mais sans toucher à la composante de transparence).
Pour récupérer les composantes de l'image dans un tableau on dispose de la méthode getImageData().
Pour dessiner l'image filtrée on dispose de la méthode putImageData().

Ombrer les formes et chemins avec des filtres CSS

Un filtre avec la syntaxe CSS peut être basé sur la fonction drop-shadow(). Ce filtre a alors pour effet d'ombrer les objets du canevas.
Ci-dessous un document HTML contenant un canevas :

Le code HTML : <canvas width ="400" height ="400" style ="width : 80%; height : auto; background : linear-gradient(to bottom, skyblue ,white) ;"> </canvas>

Notez le dégradé linéaire en arrière plan du canevas.

Le script qui remplit ce canevas se résume en six lignes : var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); contexte.fillStyle ="white"; contexte.filter = "blur(1px) drop-shadow(10px 10px 5px gray)"; var croix = new Path2D('M170,50 h60 v50 h60 v60 h-60 v90 h110 v60 h-110 v90 h-60 v-90 h-110 v-60 h110 v-90 h-60 v-60 h60 v-50 z'); contexte.fill(croix);

Une seule instruction pour dessiner le chemin et une seule ligne pour ombrer l'objet.
Un filtre avec deux primitives : blur & drop-shadow.
Comme la propriété CSS box-shadow, la fonction drop-shadow prend quatre arguments : offsetX, offsetY, floutage, couleur. Les deux premiers arguments peuvent être négatifs.

Pour connaitre les différentes valeurs possibles de la propriété filter : les filtres en CSS

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Insertion d'une image dans le canevas - les filtres

Insertion dans le canevas d'une image du DOM

Le code HTML

Le script correspondant

Insertion dans un canevas d'images qui ne sont pas dans le DOM

Le code HTML

Le script correspondant

Insertion d'images sans déformation

Le code correspondant

Filtre les objets du canevas

Exemple 1

Exemple 2

Ombrer les formes et chemins avec des filtres CSS