Canvas createImageData() Méthode
Exemple
Créez un objet ImageData de 100 x 100 pixels où chaque pixel est rouge :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(100, 100);
for (let i = 0; i < imgData.data.length; i += 4)
{
imgData.data[i+0] = 255;
imgData.data[i+1] = 0;
imgData.data[i+2] = 0;
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 10); Description
La méthode createImageData() crée un nouvel objet ImageData vide. Les valeurs de pixel de cet objet sont noires transparentes : RGBA(0, 0, 0, 0).
Pour chaque pixel dans un objet ImageData, il y a quatre informations : les valeurs RGBA :
R - La couleur rouge (de 0 à 255)
G - La couleur verte (de 0 à 255)
B - La couleur bleue (de 0 à 255)
A - Le canal alpha (de 0 à 255 ; 0 est transparent et 255 est entièrement visible)
Les informations de couleur et d'alpha sont contenues dans un tableau de 4 fois la taille de l'objet ImageData : largeur * hauteur * 4.
Le tableau contenant les informations de couleur et d'alpha est stocké dans la propriété data de l'objet ImageData.
Exemple
Définir le premier pixel d'un objet ImageData en rouge :
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255; Définir le deuxième pixel d'un objet ImageData en vert :
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255; Voir aussi :
Syntaxe
Il existe deux versions de la méthode createImageData() :
Créez un nouvel objet ImageData avec des dimensions spécifiées :
| context .createImageData( width, height ) |
Créez un nouvel objet ImageData avec les mêmes dimensions qu'un autre objet ImageData (ne copie pas l'objet ImageData) :
| context .createImageData( imageData ) |
Valeurs des paramètres
| Param | Description |
|---|---|
| width | La largeur du nouvel objet ImageData en pixels |
| height | La hauteur du nouvel objet ImageData en pixels |
| imageData | objet anotherImageData |
Valeur de retour
| Un objet imageData |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
createImageData() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |