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

What this article shares to you is about how to carry out the pre-research of HTML 5 Canvas filter. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Pre-research of Canvas filter

Recently, Xiaohua is very interested in Qpai's filter effects and has been tossing about for a while. In fact, these effects can also be simulated with canvas.

Let's take a look at a demo:

* experience configuration: pc opens here with chrome or safari or iPad/iPad2/iPhone4.

The difference between pure web graphics processing and native app graphics processing will not be discussed here. Welcome to discuss.

The following is the full text:

The main content of this paper is: simple graphic processing of canvas, including coding reading and writing, pixel-level processing and simple usage. These operations are handled on the client side.

***。 In order to carry out picture processing, the first consideration should be the reading and writing of coding.

1. Take a look at how canvas reads pictures.

It should be noted here that some students can't read pictures when they start playing canvas. The reason is: you have to load pictures first, because the program runs faster than pictures.

It is necessary to understand that the concept of canvas canvas can be simply described as: using the canvas.getContext ("2d") method to obtain a 2d canvas, the canvas has its own method. With these methods, you can scribble on the canvas!

Among them, drawImage is used to "paint" the picture, it has three function prototypes

With regard to these three methods, you will understand after looking at the following picture:

In fact, it still looks a little tangled, it doesn't matter, we focus on * sentences here, because we are originally thinking about image processing, then set the width of the canvas to the width and height of the picture, and then read the picture and put it on the upper left corner of the canvas canvas ctx on the OK pull. To put it bluntly, it is when reading a picture: make a canvas that looks exactly like the picture.

In this way, it is very easy to read the picture in! Amazing!

2. How does canvas output the code?

After you doodle with the canvas method, you can easily output the picture coding in the following ways:

This method belongs to the canvas object, not the canvas. Type can be selected from MIME types such as image/png,image/jpeg,image/svg+xml. In the case of image/jpeg, you can have a second parameter, and if the value of the second parameter is between 0 and 1, it represents the quality level of the JPEG, otherwise the browser built-in default quality level is used.

Taking "image/png" as an example, you can output a string like this:

This is a long and gray string! His name is Data URI.

Be careful。

What are we going to do? Egg set, in fact, when you need to deal with this kind of picture, just put it on your own server and transfer it to the same domain (you can study the conversion method offline).

In this way, it is very simple to output the picture! Unbelievable!

Second。 What is the pixel-level processing of canvas?

You can first take a look at the extracted demo:

1. How are the pixels of the image stored?

Before processing an image, you have to understand how the image stores the data of each pixel.

Look at a picture first:

Students who play css3 know a new way to define colors-rgba, which is very similar to this.

The simple pixel storage actually stores each pixel with four numbers, namely R (red), G (green), B (blue) and A (opacity). Then there is a relationship between the A value and the opacity, that is, the opacity = A value / 255.

By changing these four dimensions of each pixel, we can achieve all the effects of changing purity, transparency, hue, brightness and so on. This is the basic principle of the filter. Ps players may be more familiar with this piece.

2. How does Canvas read and write all pixel data?

A) read

Canvas method: getImageData can get pixel data within a specified range. The parameters x and y are the starting position, and w and h are the range width and height.

This method returns an object that looks like this:

The image above corresponds to an object that stores two pixel data. The object contains an array called data. Every four key-value pairs store the data of one pixel, and the pixels are arranged from left to right.

B) write

Canvas method: putImageData can fill the specified pixel data object (the object returned by getImageData) to the specified position, with x and y as the starting filling points.

Third。 Usage?

After understanding the above principles and methods, just traverse the extracted pixel object, then change the data of each pixel according to the specified algorithm, and then redraw the object to the canvas.

Then the canvas object is used to output the code (* * dot), and the filter effect can be achieved.

The effect mainly depends on the quality of the algorithm.

It should be reminded that the pixel-level processing of canvas is more resource-intensive, but for images whose width and height are not too large, the speed is acceptable.

Here, by the way, is the simple use of this filter effects plug-in in the QST library:

Where preloaded is the number of preloaded effects (for a certain image, the effects are automatically cached in the js object after rendering, and it takes time to perform rendering, so you need to preload some of the effects).

The above is how to carry out the pre-research of HTML 5 Canvas filter. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.