Accueil

Traduction

Tutoriel Canvas - sommaire

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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

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

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 :

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 :

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) :

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

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 :

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

Le script qui remplit ce canevas se résume en six lignes :

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