Insertion d'images 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 faisant déjà partie du DOM

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

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

Le code HTML

...
<img  id ="brune" src ="../images/bikini13.jpg" width ="15%">
<canvas width ="900" height ="600" id ="canevas1"
		style="width: 100% ; height : auto ; box-shadow : 10px 10px 10px gray; border-radius : 10px;
			background-image : url(../images/bikini13.jpg); background-size : cover;  ">	
</canvas>
...

L'image sexy fait office de 'background' de la boite CANVAS.
Puis elle est insérée une deuxième fois mais avec réduction dans le coin bas droit du canevas.

La fonction correspondante

...
	var image = document.getElementById('brune'); // cibler l'image du DOM
	var canevas = document.querySelector('#canevas1'); 
	var contexte = canevas.getContext('2d');
	var X =canevas.width;
	var Y =canevas.height;
	 
	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) ; 
...

Pour insérer une image avec une certaine taille et position dans le canevas il faut utiliser la méthode drawImage avec cinq paramètres : référence objet, x, y, width, height.
x et y étant les coordonnées de l'image dans le canevas.
Si les dimensions d'affichage ne sont pas précisées, l'image est insérée avec ses dimmensions d'origine.

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

Si les images à insérer dans le canevas ne font pas partie du DOM, la technique d'insertion est un peu plus lourde ...

La méthode drawImage() a besoin que l’image ait été complètement chargée pour fonctionner.

Ci-dessous une 'toile' avec insertion de deux images qui ne font pas partie du DOM.

Le code HTML

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

La fonction JS (extrait)

...
	var lune =new Image();
	var terre = new Image();
	lune.src = '../images/lune.gif' ;
	terre.src = '../images/terre.gif'; 
	
	var canevas = document.querySelector("#canevas2");
	var contexte = canevas.getContext('2d');
	// dessin des images après leur chargement
	lune.onload =function()
		{ contexte.drawImage(lune,10,10,50,50) ; }
	terre.onload = function()
		{contexte.drawImage(terre,300,300,200,200) ;}
...

Il faut créer de nouveaux éléments IMG puis les charger et ensuite les dessiner dans la 'toile'.

Astuce HTML

Plutôt que charger les images via le script, vous pouvez les charger via le HTML sans que pour autant elles apparaissent dans la page ; il suffit d'appliquer aux images la propriété display : none dans la balise IMG.

Exemple

Le code correspondant

HTML : 
<img src ="../images/bikini27.jpg" id ="sexy1" style ="display: none" >
<img src ="../images/bikini31.jpg" id ="sexy2"  style ="display: none" >
<canvas width ="900" height ="500" 	style="width: 80% ; height : auto;"  id ="canevas3">
</canvas>

JS : 
function script3()
{
	var image1 = document.getElementById('sexy1');
	var image2 = document.getElementById('sexy2');
	var canevas = document.getElementById('canevas3'); 
	var contexte = canevas.getContext('2d');
	var X =canevas.width;
	var Y =canevas.height;
	
	contexte.drawImage(image1,0,0,X/4,Y/4) ;
	contexte.drawImage(image2,X/3,X/3,X/2,Y/2) ;
}
script3();

Le script est beaucoup plus simple que le précédent car j'ai chargé les images (mais sans les afficher) via le HTML.
Cependant il y a un problème : les images sont déformées ! Voyez la solution ci-dessous.

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.

La 'toile' ci-dessous intègre deux images : la première est déformée et la seconde ne l'est pas.

Affichez la console !

Le code correspondant

Le canevas fait 300 par 450 et est identifié "canevas4". La première image fait 300 par 200, 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.

La fonction

...
	var canevas = document.querySelector("#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; 
		contexte.drawImage(sexy,X/2,Y/2,largeur_fixee,hauteur_fixee) ;
	} // fin fonction anonyme
...

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 largeur/hauteur.

Créer des objets à partir d'images

On peut créer des objets à partir d'images.

Un document HTML avec une superbe 'toile'

Le code HTML de ce document

...
<img src ="../images/fusee.png" id ="fusee" style ="display: none" >
<img src ="../images/planete.png" id ="planete"  style ="display: none" >

<canvas width ="600" height ="600" id ="canevas" 
	style="width: 80% ; background-image : url(../images/nuit_etoilee.jpg) ; background-size : cover;">
</canvas>
...

Deux images insérées dans la page mais masquée.
La 'toile' a pour fond une superbe image.

Le script

Il est orienté objet. Je crée deux objets à partir d'images.

var canevas = document.getElementById("canevas");
var contexte = canevas.getContext('2d');
var X = canevas.width;
var Y = canevas.height;
var image1 = document.getElementById("fusee");
var image2 = document.getElementById("planete");
const fusee = 
{
  x: X/2,
  y: Y -200,
  w :80,
  h :160,
  dessin: function () 
  {
    contexte.drawImage(image1,this.x, this.y ,this.w, this.h)
  }, 
}; // fin définition objet fusee

const planete = 
{
  x: X/6,
  y: Y/6,
  w : 110,
  h : 80,
  dessin: function () 
  {
    contexte.drawImage(image2,this.x, this.y ,this.w, this.h)
  }, 
}; // fin définition objet planete

// dessiner les objets
fusee.dessin();
planete.dessin();

Il n'y aurait plus qu'à déplacer ces deux objets dans le cadre d'une boucle pour créer une animation ...

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 dans ce document :

...
var X =canevas.width;
var Y =canevas.height;
var jolie = new Image(); 
jolie.src ="../images/noire_bikini.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 en CSS, vous reconnaissez la syntaxe.

Exemple 2

Il est possible de chainer plusieurs fonctions de filtre.

Ci-dessous un document HTML contenant un canevas. Ce dernier 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 insertion.

Le script dans ce document:

...
var X =canevas.width;
var Y =canevas.height;
var jolie = new Image(); 
jolie.src ="../images/latino_bikini.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'images dans le canevas - les filtres

Insertion dans le canevas faisant déjà partie du DOM

Le code HTML

La fonction correspondante

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

Le code HTML

La fonction JS (extrait)

Astuce HTML

Exemple

Le code correspondant

Insertion d'images sans déformation

Le code correspondant

La fonction

Créer des objets à partir d'images

Un document HTML avec une superbe 'toile'

Le code HTML de ce document

Le script

Filtre les objets du canevas

Exemple 1

Exemple 2

Ombrer les formes et chemins avec des filtres CSS

Le code HTML