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

In this article, the editor introduces in detail "how to use HTML5 Canvas to do online image processing", the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use HTML5 Canvas to do online image processing" article can help you solve your doubts.

The canvas element in HTML 5 is quite powerful, and its getImageData method allows you to directly bitmap loaded images. However, it is troublesome to operate the bitmap directly. If you use the convolution matrix as a tool, you can achieve complex effects through a few simple parameters.

The so-called convolution of the matrix is shown in the following figure. When calculating the values in the red box, we first extract eight numbers from the surrounding green box, then multiply them with the corresponding positions in the applied matrix, and then add each product together to get the final value.

Convolution calculate uses HTML5 Canvas to do online Image processing

For example, 42 in the picture above comes from this:

(40: 0) + (42: 1) + (46)

+ (460.00) + (500.00) + (550.00)

+ (52 million) + (56 million) + (58 million)

= 42

This is convolution. Then, the so-called convolution operation of the image means that the pixel value of each point on the image is calculated with this matrix to get a new value.

For example, the following picture

Image uses HTML5 Canvas to do online Image processing

Use the following matrix

-6-3 0

-3-1 3

0 3 6

You can get the relief effect immediately.

Image emboss uses HTML5 Canvas to do online Image processing

Then, to make it easier to use, you usually divide the final value by a factor and add an offset.

For example, the following matrix.

0 0 0

0 1 0

0 0 0

This matrix (in fact, the matrix itself does not do any operation on the image), and then set the coefficient to-1, offset to 255, you can achieve the inverse effect, which is quite amazing.

Image inverse uses HTML5 Canvas to do online Image processing

In order to simplify the operation, I wrote a simple function to manipulate the image data.

The first argument to the function is the imageData object on canvas

The second parameter is the array corresponding to the incoming matrix, if it is a matrix like the following

A b c

D e f

G h i

Then the parameter passed in the second one should be [arecrum, brecrum, creagne, e-recorder, gregory, hpeni].

The third parameter is the divisor.

The fourth parameter is the offset.

/ / functions for calculating convolution matrix function ConvolutionMatrix (input, matrix, divisor, offset) {/ / create an output imageData object var output = document.createElement ("canvas") .getContext ('2d') .createImageData (input); var w = input.width, h = input.height; var iD = input.data, oD = output.data; var m = matrix; / / A pair of RGB of internal points except the edge, with transparency set to the end

255 for (var y = 1; y < hmurl; y + = 1) {for (var x = 1; x < wmur1; x + = 1) {for (var c = 0; c < 3; c + = 1)

{var I = (yaww + x) * 4 + c OD [I] = offset + (m [0] * IDD [I-walled 4-4] + m [1] * IDD [I-walled 4] + m [2] * IDD [I-4] + m [3] * IDD [I-4] + m [4] * IDI [I] + m [5] * IDD [I + 4] + m [6] * IDD [I + walled 4-4] + m [7] * IDD [I + walled 4] + m [8] * IDD [I + walled 4]) / divisor OD [(yalloww + x) * 4 + 3] = 255; / / set transparency return output

I only write a convolution matrix of order 3 here. If you don't think high is enough, you can also implement a level 5 one on your own.

Read here, this article "how to use HTML5 Canvas to do online image processing" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to 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.