Apply convolution matrix to Image Processing in Canvas of HTML 5

This article introduces how to use convolution matrix in Canvas of HTML 5 to process images. For more information, see. The canvas Element in HTML 5 is quite powerful, and its getImageData method can be used to directly bitmap the loaded image. However, bitmap operations are difficult. If you use the convolution matrix tool, you can use several simple parameters to achieve complex results. The so-called matrix convolution is like the display. When calculating the values in the red box, we extract 8 numbers in the surrounding green box first, then multiply with the corresponding position in the matrix to be applied, and then add the product together to get the final value.

 

For example, 42 is like this:   (40*0)+(42*1)+(46*0)
+ (46*0)+(50*0)+(55*0)
+ (52*0)+(56*0)+(58*0)
= 42This is convolution. Then, the so-called convolution operation on the image refers to the calculation of the pixel value of each point on the image using this matrix to get a new value.

For example, the figure below

Use the following matrix
-6-3 0
-3-1 3
0 3 6
The relief effect is immediately available.

For convenience, the final value is usually divided by a coefficient and an offset is added.
For example, the following matrix.
0 0 0
0 1 0
0 0 0
This matrix (in fact, this matrix does not perform any operations on the image itself), and then sets the coefficient to-1, and the offset to 255 to achieve the reversed effect, which is amazing.

To simplify the operation, I wrote a simple function to operate image data.
The first parameter of the function is the imageData object on the canvas.
The second parameter is the array corresponding to the input matrix.
A B c
D e f
G h I
The second input parameter should be [a, B, c, d, e, f, g, h, I]
The third parameter is the divisor.
The fourth parameter is the offset.

The Code is as follows:

Copy code

// Functions used to calculate the 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;   // Perform RGB operations on the internal points except the edge points. The transparency is set to 255 at the end. For (var y = 1; y For (var x = 1; x <W-1; x + = 1 ){ For (var c = 0; c <3; c + = 1 ){ Var I = (y * w + x) * 4 + c; OD [I] = offset + (M [0] * iD [I-w * 4-4] + m [1] * iD [I-w * 4] + m [2] * iD [I -w * 4 + 4] + M [3] * iD [I-4] + m [4] * iD [I] + m [5] * iD [I + 4] + M [6] * iD [I + w * 4-4] + m [7] * iD [I + w * 4] + m [8] * iD [I + w * 4 + 4]) /Divisor; } OD [(y * w + x) * 4 + 3] = 255; // sets the transparency. } } Return output; }