Effet de transparence dans Canvas

Comment appliquer un filtre de transparence en modifiant le canal alpha.

Démonstration

Niveau d'opacité (0=transparent, 255=opaque)

Code source

function dispImage() 
{
  var level = document.getElementById("level").value;
  var canvas = document.getElementById("canvas1");
  var context = canvas.getContext("2d");
  var image = new Image();
  image.src = "http://www.scriptol.fr/design/images/infinite-oz.jpg";

  context.drawImage(image, 0, 0, 562, 350);    
  var ipic = context.getImageData(0, 0, 562, 350);
  var idata = ipic.data;
  for (var i = 0; i < idata.length; i += 4) 
  {
    idata[i+3] = level;
  }
  context.putImageData(ipic, 0, 0);
}

Explications...

Une image est chargée en mémoire lorsqu'on l'assigne à l'attribut src d'un objet image nouvellement créé.
La méthode drawImage affiche l'image dans le canevas.

La méthode getImageData crée un tableau des composantes de couleurs RVBA (rouge, vert, bleu, alpha=opacité) de chaque pixel.

Le canal alpha est modifié pour chaque pixel. C'est le quatrième octet de chaque pixel dans le tableau.

La méthode putImageData place l'image modifiée à travers ce tableau, dans le canevas.

Tweet