Latest web development tutorials

méthode toile HTML getImageData ()

HTML Manuel toile de référence HTML Manuel toile de référence

Exemples

Les getImageData de code suivant () Copier sur des données de pixels de toile rectangle désigné, et () les données d'image de nouveau dans la toile par putImageData:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Essayez »

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

méthode Internet Explorer 9, le support Firefox, Opera, Chrome et Safari getImageData ().

Note: 8 et plus tôt nternet Explorer ne prend pas en charge l'élément <canvas>.

Définition et utilisation

méthode getImageData () retourne l'objet ImageData qui est une copie des données de pixels de toile rectangulaire spécifiées.

Remarque: objet ImageDataest pas l'image, qui fournit une partie de la toile (rectangle), et enregistré dans l'information rectangle de chaque pixel.

ImageData objet pour chaque pixel, il existe quatre domaines de l'information, à savoir les valeurs RGBA:

R - rouge (0-255)
G - Green (0-255)
B - bleu (0-255)
A - canal alpha (0-255; 0 est transparent, 255 est entièrement visible)

couleur / information alpha sous la forme d'un tableau et stocké dans l' objet de ImageData données propriétés.

Astuce: array complète de l' information couleur / alpha dans l'opération, vous pouvez utiliser putImageData () méthode des données d'image est copiée vers la toile.

exemple:

objet ImageData Le code suivant peut être obtenu est retourné dans les informations de couleur / alpha premier pixel:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

essayer

Astuce: Vous pouvez également utiliser la méthode getImageData () pour inverser la couleur de chaque pixel d'une image sur la toile.

Utilisez cette formule à travers tous les pixels, et modifier ses valeurs de couleur:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

Regardez l'exemple "essayer" suivant!

syntaxe JavaScript

Syntaxe JavaScript: contexte .getImageData (x, y, largeur, hauteur);

Paramètre Valeur

参数 描述
x 开始复制的左上角位置的 x 坐标（以像素计）。
y 开始复制的左上角位置的 y 坐标（以像素计）。
width 要复制的矩形区域的宽度。
height 要复制的矩形区域的高度。

Exemples

D'autres exemples

L'image que vous souhaitez utiliser:

Le Cri

Exemples

Utilisez getImageData () pour inverser la couleur de chaque pixel de l'image sur la toile:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);

Essayez »

HTML Manuel toile de référence HTML Manuel toile de référence