HTML Reference Manual

HTML 标签大全

HTML canvas getImageData() method

getImageData() returns an ImageData object that describes the implicit pixel data of a canvas area, represented by a rectangle, starting at (sx, sy), with a width of sw, and a height of sh.

HTML canvas reference manual

Online Example

The following code uses getImageData() to copy the pixel data of a specified rectangle on the canvas, and then uses putImageData() to place the image data back on the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas getImageData() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="150" style="border:1px solid #d3d3d3">
Your browser does not support　HTML5　canvas　tag.
</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()">Copy</button>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support getImageData() method.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The getImageData() method returns an ImageData object that copies the pixel data of the specified rectangle on the canvas.

Note:The ImageData object is not an image, it specifies a part (rectangle) of the canvas, and saves the information of each pixel within the rectangle.

For each pixel in the ImageData object, there are four aspects of information, namely RGBA values:

R - red (0-255)
G - green (0-255)
B - blue (0-255)
A - alpha channel (0-255; 0 is transparent,255 is completely visible)

color/The alpha information exists in the form of an array and is stored in the data property.

Tip:to operate the color in the array after completion/After the alpha information, you can use putImageData() The method copies the image data back to the canvas.

Example:

The following code can obtain the color of the first pixel in the returned ImageData object/Alpha information:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas getImageData() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="150" style="border:1px solid #d3d3d3">
Your browser does not support　HTML5　canvas　tag.
</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];
red=imgData.data[1];
green=imgData.data[2];
blue=imgData.data[3];
alert(red　+　" "　+　green　+　" "　+　blue　+　" "　+　alpha);
</script>
</body>
</html>

Test and see ‹/›

Tip:You can also use the getImageData() method to reverse the color of each pixel of an image on the canvas.

Use this formula to iterate over all pixels and change their color values:

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

JavaScript Syntax

JavaScript Syntax:	context.getImageData(x,y,width,height);

Parameter Value

Parameter	Description
x	x coordinate of the top-left corner of the starting copy position (in pixels).
y	y coordinate of the top-left corner of the starting copy position (in pixels).
width	Width of the rectangular area to be copied.
height	Height of the rectangular area to be copied.

Image to be used:

Online Example

Use getImageData() to reverse the color of each pixel on the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas getImageData() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<img id="scream" src="views.png">
<canvas id="myCanvas" width="3" height="2" style="border:1px solid #d3d3d3">
Your browser does not support　HTML5　canvas　tag.
</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);
　　　　//　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);
};
</script>
</body>
</html>

Test and see ‹/›

HTML canvas reference manual

HTML: <template> tag