L'objetImageData représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :

width

La largeur de l'image en pixels.

height

La hauteur de l'image en pixels.

data

UnUint8ClampedArray représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus).

La propriétédata retourne un tableauUint8ClampedArray auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.

LeUint8ClampedArray contientheight(hauteur) ×width(largeur) × 4 octets, dont les valeurs d'indices vont de 0 à (height ×width × 4)-1.

Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit :

composanteBleue = imageData.data[50 * (imageData.width * 4) + 200 * 4 + 2];

Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attributUint8ClampedArray.length :

var nbOctets = imageData.data.length;

Pour créer un nouvel objetImageData vierge, vous pouvez utiliser la méthodecreateImageData(). Il existe deux versions de la méthodecreateImageData() :

var monImageData = ctx.createImageData(largeur, hauteur);

Cela crée un nouvel objetImageData avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.

Vous pouvez aussi créer un nouvel objetImageData ayant les mêmes dimensions que celles de l'objet indiqué parautreImageData. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents.Cela ne copie pas les données d'image !

var monImageData = ctx.createImageData(autreImageData);

Pour obtenir un objetImageData contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthodegetImageData() :

var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);

Cette méthode retourne un objetImageData représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (left,top)(gauche,haut), (left+width,top)(gauche+largeur, haut), (left,top+height)(gauche, haut+hauteur) et (left+width,top+height)(gauche+largeur, haut+hauteur). Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.

Cette méthode est aussi présentée dans l'articleManipulation vidéo utilisant canvas.

Dans cet exemple, nous utilisons la méthodegetImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée parlayerX etlayerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels quegetImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le<div> pour afficher la couleur.

<canvas width="300" height="227"></canvas><div></div>

var img = new Image();img.src = "./assets/rhino.jpg";var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");img.onload = function () {  ctx.drawImage(img, 0, 0);  img.style.display = "none";};var color = document.getElementById("color");function pick(event) {  var x = event.layerX;  var y = event.layerY;  var pixel = ctx.getImageData(x, y, 1, 1);  var data = pixel.data;  var rgba =    "rgba(" +    data[0] +    ", " +    data[1] +    ", " +    data[2] +    ", " +    data[3] / 255 +    ")";  color.style.background = rgba;  color.textContent = rgba;}canvas.addEventListener("mousemove", pick);

Vous pouvez utiliser la méthodeputImageData() pour peindre les données pixel dans un contexte :

ctx.putImageData(monImageData, dx, dy);

Les paramètresdx etdy indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.

Par exemple, pour peindre l'image entière représentée parmonImageData dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :

ctx.putImageData(monImageData, 0, 0);

Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide deputImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale(niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. VoirNiveaux de gris sur Wikipédia pour plus d'informations.

<canvas width="300" height="227"></canvas><div>  <input value="Niveau de gris" type="button" />  <input value="Inversion" type="button" /></div>

var img = new Image();img.src = "./assets/rhino.jpg";img.onload = function () {  dessiner(this);};function dessiner(img) {  var canevas = document.getElementById("canevas");  var ctx = canevas.getContext("2d");  ctx.drawImage(img, 0, 0);  img.style.display = "none";  var imageData = ctx.getImageData(0, 0, canevas.width, canevas.height);  var data = imageData.data;  var inversion = function () {    for (var i = 0; i < data.length; i += 4) {      data[i] = 255 - data[i]; // rouge      data[i + 1] = 255 - data[i + 1]; // vert      data[i + 2] = 255 - data[i + 2]; // bleu    }    ctx.putImageData(imageData, 0, 0);  };  var niveaudegris = function () {    for (var i = 0; i < data.length; i += 4) {      var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;      data[i] = moy; // rouge      data[i + 1] = moy; // vert      data[i + 2] = moy; // bleu    }    ctx.putImageData(imageData, 0, 0);  };  var btninversion = document.getElementById("btninversion");  btninversion.addEventListener("click", inversion);  var btnniveaudegris = document.getElementById("btnniveaudegris");  btnniveaudegris.addEventListener("click", niveaudegris);}

A l'aide de la méthodedrawImage (), un deuxième canevas, et la propriétéimageSmoothingEnabled , nous pouvons zoomer sur notre image et voir les détails.

Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.

zoomctx.drawImage(  canvas,  Math.abs(x - 5),  Math.abs(y - 5),  10,  10,  0,  0,  200,  200,);

Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriétéimageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).

L'HTMLCanvasElement fournit une méthodetoDataURL (), utile lors de l'enregistrement d'images. Il retourne unURI de données contenant une représentation de l'image dans le format spécifié par le paramètre detype (par défaut enPNG ). L'image renvoyée est dans une résolution de 96 dpi.

canvas.toDataURL('image/png')

Par défaut. Crée un image PNG.

canvas.toDataURL('image/jpeg', quality)

Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.

Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de<image> ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.

Vous pouvez également créer unBlob à partir du canevas.

canvas.toBlob(callback, type, encoderOptions)

Crée un objetBlob représentant l'image contenue dans le canevas.

• ImageData
• Manipulating video using canvas
• Canevas, images et pixels – par Christian Heilmann (en)