Référentiel de référence HTML

HTML 标签大全

Méthode getImageData() du canvas HTML

getImageData() retourne un objet ImageData, utilisé pour décrire les données de pixels cachés de la zone canvas, cette zone est représentée par un rectangle, avec des coordonnées de départ (sx, sy), une largeur sw et une hauteur sh.

Guide de référence HTML canvas

在线示例

Le code suivant utilise getImageData() pour copier les données de pixels du rectangle spécifié du canvas, puis utilise putImageData() pour placer les données d'image sur le canvas :

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150" style="border:1px　solid　#d3d3d3">
您的浏览器不支持　HTML5　canvas　标签。
</canvas>
<script>
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);
}
</script>
<button onclick="copy()">Copier</button>
</body>
</html>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge getImageData() méthode.

Remarque : Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode getImageData() retourne un objet ImageData, qui copie les données de pixels du rectangle spécifié du canvas.

Remarque :L'objet ImageData n'est pas une image, il spécifie une partie du canvas (un rectangle) et enregistre les informations de chaque pixel de ce rectangle.

Pour chaque pixel de l'objet ImageData, il existe quatre types d'informations, à savoir les valeurs RGBA :

R - rouge (0-255)
G - vert (0-255)
B - bleu (0-255)
A - canal alpha (0-255; 0 est transparent255 est complètement visible)

color/Les informations alpha existent sous forme d'array et sont stockées dans l'objet ImageData data .

提示：sur l'attribut des couleurs/Après les informations alpha, vous pouvez utiliser putImageData() La méthode copie les données d'image sur le canvas.

Exemple :

Le code suivant permet d'obtenir la couleur du premier pixel de l'objet ImageData retourné/Informations alpha :

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150" style="border:1px　solid　#d3d3d3">
您的浏览器不支持　HTML5　canvas　标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
var　imgData=ctx.getImageData(30,30,50,50);
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
alert(red　+　"　"　+　green　+　"　"　+　blue　+　"　"　+　alpha);
</script>
</body>
</html>

Voyons voir ‹/›

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

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

JavaScript 语法

JavaScript 语法：	context.getImageData(x,y,width,height);

参数值

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

要使用的图像：

在线示例

使用 getImageData() 来反转画布上的图像的每个像素的颜色：

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<img　id="scream"　src="views.png">
<canvas　id="myCanvas"　width="300"　height="200"　style="border:1px　solid　#d3d3d3">
您的浏览器不支持　HTML5　canvas　标签。
</canvas>
<script>
document.getElementById("scream").onload=function()
{
　　　　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);
　　　　//　Inverser les couleurs
　　　　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);
};
</script>
</body>
</html>

Voyons voir ‹/›

Guide de référence HTML canvas

HTML: <template> balise