Shulou(Shulou.com)06/01 Report--

This article shares with you the content of an example analysis of HTML5 Canvas pixel operations. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

Note that because people can manipulate pixel data directly, it appears that some people use their ability to retrieve and modify data directly from Canvas to commit malicious and illegal acts. Browsers limit people's ability to access image data across domains with Canvas, and non-domain images prohibit reading and editing,

The ImageData object holds image pixel values during pixel operations. Each object has three attributes: width, height, and data. The data attribute type is CanvasPixelArray, which is used to store width*height*4 pixel values. Each pixel has an RGB value and a transparency Alpha value (which ranges from 0 to 255). The pixels are stored in rows from left to right and top to bottom.

Since pixel operations are discussed, it is best for readers to understand the process from beginning to end, including reading, controlling, and updating pixels on Canvas. Here, we'll introduce three built-in methods, getImageData(), putImageData(), and create-ImageData().

1. getImageData()

The getImageData() method copies pixel data for a rectangular area from Canvas. The specific call code is as follows:

var canvasData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

Note that pixel level operations are so computationally intensive that viewing canvasData.data can cause browsers to crash due to excessive memory consumption,

2. putImageData()

The putImageData() method is used to modify or update pixel information in a graphic area. This method can only be used in the same domain. Local hard disk mode also cannot be used, you must set up a Web server.

The specific codes are as follows:

var canvasData = ctx.putImageData(canvasData, 0, 0);

3. createImageData()

The createImageData() method creates an ImageData object based on the width and height of the specified image data. This method does not copy pixels from existing Canvas, it generates a completely blank pixel matrix, its initial value is fully transparent black, i.e.(255,255,255,0), pseudo-code is as follows:

var canvasData = ctx.createImageData(mycanvas.width,my canvas.height);

canvasData="Some pixel data"

ctx.putImageData (canvasData, 0, 0);

The following code must be executed in a Web server environment, otherwise it will not display correctly.

var mycanvas = document.getElementById('mycanvas');

var ctx=mycanvas.getContext('2d');

var img=new Image();

img.src="test.png";

img.onload=function(){

ctx.drawImage(img,0,0);

var imgd = ctx.getImageData(0,0,100,200);

var pix = imgd.data;

//Start color reversal below

for(var i=0,n=pix.length;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.