Guillaume Duverger - Développement & Graphisme - Blog

Effets sur images avec Canvas

💡 L'objectif de cette démonstration est de manipuler des images en utilisant la propriété CanvasRenderingContext2D.filter , qui fait partie de l'API Canvas 2D.

Effet sépia :

Code :

<canvas id="canvas" height=300 width=600></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.filter = "sepia(1)";
var monImage = new Image();
    monImage.onload = function () {

        ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
    }
    monImage.src = 'image.jpg';

Effet grayscale :

Code :

<canvas id="canvas1" height=300 width=600></canvas>

var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");


ctx1.filter ="grayscale(1)";
var monImage1 = new Image();
    monImage1.onload = function () {

        ctx1.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas1.width, canvas1.height);
    }
    monImage1.src = 'image.jpg';

💡 Vous l'aurez compris si vous connaissez bien les filtres CSS Il est possible d'appliquer les mêmes filtres avec la propriété CanvasRenderingContext2D.filter. Comme avec CSS, vous pouvez appliquer plusieurs filtres sur la même image comme sur l'exemple ci-dessous :

Code :

<canvas id="canvas2" height=300 width=600></canvas>

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");


ctx2.filter ="sepia(0.2) brightness(1.1) contrast(1.3)";
var monImage2 = new Image();
    monImage2.onload = function () {

        ctx2.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas2.width, canvas2.height);
    }
	ctx2.globalCompositeOperation = 'luminosity';
	

ctx2.fillStyle = 'rgba(255, 165, 0, 0.34)';
ctx2.fillRect(0, 0, 600, 300);
monImage2.src = 'image.jpg';

💡 Pour manipuler des images avec Canvas, vous pouvez également utiliser la propriété CanvasRenderingContext2D.globalCompositeOperation.