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

HTML5 Canvas pixel processing is how to use, in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Content summary: through simple code examples and slightly obscene picture demo, this paper shows the common interface of canvas in image pixel data operation. As for how to use these interfaces to achieve more complex effects, they will be discussed in subsequent chapters.

(1) canvas image filling; (2) setting / obtaining canvas image data; (3) creating canvas picture data; (4) adding a little bit about imageData.data; (5) writing in the back

1. Canvas picture filling

The code is as follows:

/ * *

* @ description

* @ param {Number} x the distance from the starting point of the image to the leftmost canvas

* @ param {Number} y the distance from the starting point of the image to the top of canvas

* @ param {Number} the width of the final image drawn on canvas by width

* @ param {Number} the height of the final image drawn on canvas by height

, /

Context.drawImage (image, x, y, width, height)

Demo_01 is as follows:

The code is as follows:

Function $(id) {return document.getElementById (id);}

Function getImage (url, callback) {

Var img = document.createElement ('img')

Img.onload = function () {

Callback & & callback (this)

}

Img.src = url

Document.body.appendChild (img)

}

Function drawImage () {

Var url = 'xiangjishi.png'

Var canvas = $('draw_image_canvas')

Var context = canvas.getContext ('2d')

GetImage (url, function (img) {

Canvas.width = img.width

Canvas.height = img.height

Var offsetX = 20

Var offsetY = 20

Var drawWidth = img.width/4

Var drawHeight = img.height/4

Context.drawImage (img, offsetX, offsetY, drawWidth, drawHeight)

});

}

DrawImage ()

Demo description: load the xiangjishi.png. After loading, draw the xiangjishi.png on the canvas from the coordinates (0,0) relative to the upper left corner of the canvas.

As you can see here, we may not have a very clear understanding of the meaning of the four parameters in context.drawImage (image, x, y, width, height). You can simply modify several parameters to see the effect:

The code is as follows:

Var offsetX = 20

Var offsetY = 20

Var drawWidth = img.width/2

Var drawHeight = img.height/2

Context.drawImage (img, offsetX, offsetY, drawWidth, drawHeight)

Combined with the above description of API, the modified demo effect should not be difficult to understand the meaning represented by the four parameters.

The code is as follows:

Context.drawImage (image, x, y, width, height)

2. Get / set canvas image data

The code is as follows:

/ * *

* @ description to obtain pixel information for a specific area of canvas

* @ param {Number} x the distance from the starting point of the information to the far left of the canvas

* @ param {Number} y the distance from the beginning of the information to the top of the canvas

* @ param {Number} width obtained by width

* @ param {Number} final height of height

, /

Context.getImageData (x, y, width, height)

This method returns an ImageData object that has three main properties:

ImageData.width: how many elements are there in each row

ImageData.height: how many elements are in each column

ImageData.data: an one-dimensional array that stores the RGBA value of each pixel obtained from canvas. The array holds four values for each pixel-red, green, blue, and alpha transparency. Each value is between 0,255. As a result, each pixel on canvas becomes four integer values in this array. The array is filled from left to right and from top to bottom.

The code is as follows:

/ * *

* @ description sets the pixel information of a specific area of canvas with a specific imageData

* @ param {Number} x is set from the x point of canvas

* @ param {Number} y is set from the y point of canvas

* @ param {Number} width obtained by width

* @ param {Number} final height of height

, /

Context.putImageData (imageData, x, y)

The following illustrates the usage of getImageData () and the corresponding meaning of their parameters in combination with demo_2

The DEMO_02 source code is as follows, slightly modified on the basis of demo_01:

The code is as follows:

The code is as follows:

Function getAndSetImageData () {

Var url = 'xiangjishi.png'

GetImage (url, function (img) {

$('draw_image_canvas'). Width = img.width

$('draw_image_canvas'). Height = img.height

Var context = $('draw_image_canvas'). GetContext (' 2d')

Context.drawImage (img, 0,0, img.width, img.height)

/ / get pixel information

Var offsetX = img.width/2

Var offsetY = img.height/2

Var getImgWidth = img.width/2

Var getImgHeight = img.height/2

Var imgageData = context.getImageData (offsetX, offsetY, getImgWidth, getImgHeight)

/ / set pixel information. Ignore the specific code here and know that the pixel information obtained above can be put into another canvas intact.

Var startX = 0

Var startY = 0

Var ct = $('get_image_canvas'). GetContext (' 2d')

$('get_image_canvas'). Width = img.width

$('get_image_canvas'). Height = img.height

Ct.putImageData (imgageData, startX, startY)

});

}

The display effect of demo_2 is as follows:

At this point, you can basically clear the meaning of the four parameters of the getImageData method. It is not difficult to understand the putImageData parameters. You can see the effect after slightly modifying the code of demo_2.

The code is as follows:

Function getAndSetImageData () {

Var url = 'xiangjishi.png'

GetImage (url, function (img) {

$('draw_image_canvas'). Width = img.width

$('draw_image_canvas'). Height = img.height

Var context = $('draw_image_canvas'). GetContext (' 2d')

Context.drawImage (img, 0,0, img.width, img.height)

/ / get pixel information

Var offsetX = img.width/2

Var offsetY = img.height/2

Var getImgWidth = img.width/2

Var getImgHeight = img.height/2

Var imgageData = context.getImageData (offsetX, offsetY, getImgWidth, getImgHeight)

/ / set pixel information

Var startX = img.width/2; / / this used to be 0

Var startY = img.width/2; / / this used to be 0

Var ct = $('get_image_canvas'). GetContext (' 2d')

$('get_image_canvas'). Width = img.width

$('get_image_canvas'). Height = img.height

Ct.putImageData (imgageData, startX, startY)

});

}

But try to change a few parameters by yourself, and you may have a better understanding:

3. Create canvas image data

The code is as follows:

/ * *

* @ description creates a set of image data in advance and binds it to the canvas object

* @ param {Number} width created by width

* @ param {Number} height created by height

, /

Context.createImageData (width, height)

The interface is relatively simple, and the created data can be processed in the same way as the data obtained with getImageData. One thing to note here is that this set of image data may not necessarily reflect the current status of canvas.

IV. A supplement to imageData

In "HTML5 Advanced programming" and many articles, imageData.data is treated as an array, but in fact:

The code is as follows:

What imageData.data returns is not a real array, but an object of a class array, which can print out the type of imageData.data.

Console.log (Object.prototype.toString.call (imgageData.data)); / / output: [object Uint8ClampedArray]

Then print out the specific content of the imageData.data. The content is long, and only the first and last paragraphs are intercepted. You can see:

ImageData.data is actually an object whose index starts at 0 and goes all the way to width*height*4-1.

Why not just store it in an array? Because there is an upper limit for the length of the array, if it is limitLength, the elements that exceed limitLength are stored as keys. For example, data [limitLength + 100] is actually data ['limitLength + 100 +'] (the specific value of limitLength can not be remembered, interested children's shoes can be checked)

As for the last byteLength, byteOffset, and buffer attributes, they are not delved into and are not expanded here to avoid misleading the reader.

This is the answer to the question about the processing and use of HTML5 Canvas pixels. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.