Use canvas to implement the image filter effect. Appendix _ html5 tutorial skills-

This is a simulated video camera shot when the screen appears point particles effect, interested in research friends can try more results, the Code is not optimized, just a rough Demo, if you like it, you can take a look at this very interesting special effect, simulating the effect of point particles when a camera is shooting a TV screen. The size of particles can be adjusted as needed through the transformation matrix. If you are interested in the study, you can try more results. The code is not optimized. It is just a rough Demo and you can improve it on your own.

1. Get image data

The Code is as follows:

Img. src = 'HTTP: // bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg ';
Canvas. width = img. width;
Canvas. height = img. height;
Var context = canvas. getContext ("2d ");
Context. drawImage (img, 0, 0 );
Var canvasData = context. getImageData (0, 0, canvas. width, canvas. height );

2. Set the filter Matrix

The Code is as follows:

Var m_VideoType = 0;
Var pattern = new Array ();
Switch (m_VideoType)
{
Case0: // VIDEO_TYPE.VIDEO_STAGGERED:
{
Pattern = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
2, 1,
];
Break;
}
Case1: // VIDEO_TYPE.VIDEO_TRIPED:
{
Pattern = [
0,
1,
2,
];
Break;
}
Case2: // VIDEO_TYPE.VIDEO_3X3:
{
Pattern =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
Break;
}
Default:
{
Pattern =
[
0, 1, 2, 0, 0,
1, 1, 1, 2, 0,
0, 1, 2, 2, 2,
0, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 0, 0, 1, 2,
2, 0, 1, 1, 1,
2, 2, 0, 1, 2,
2, 0, 0, 0, 1,
1, 2, 0, 1, 1,
2, 2, 2, 0, 1,
1, 2, 0, 0, 0,
1, 1, 2, 0, 1,
1, 2, 2, 2, 0,
];
Break;
}
}
Var pattern_width = [2, 1, 3, 5];
Var pattern_height = [6, 3, 3, 15];

3. Get filtered data

The Code is as follows:

For (var x = 0; x <canvasData. width; x ++ ){
For (var y = 0; y <canvasData. height; y ++ ){
// Index of the pixel in the array
Var idx = (x + y * canvasData. width) * 4;
Var r = canvasData. data [idx + 0];
Var g = canvasData. data [idx + 1];
Var B = canvasData. data [idx + 2];
Var nWidth = pattern_width [m_VideoType];
Var nHeight = pattern_height [m_VideoType];
Var index = nWidth * (y % nHeight) + (x % nWidth );
Index = pattern [index];
If (index = 0)
Var r = fclamp0255 (2 * r );
If (index = 1)
Var g = fclamp0255 (2 * g );
If (index = 2)
Var B = fclamp0255 (2 * B );
// Assign gray scale value
CanvasData. data [idx + 0] = r; // Red channel
CanvasData. data [idx + 1] = g; // Green channel
CanvasData. data [idx + 2] = B; // Blue channel
CanvasData. data [idx + 3] = 255; // Alpha channel
// Add a black border
If (x <8 | y <8 | x> (canvasData. width-8) | y> (canvasData. height-8 ))
{
CanvasData. data [idx + 0] = 0;
CanvasData. data [idx + 1] = 0;
CanvasData. data [idx + 2] = 0;
}
}
}

4. Write filtered data

The Code is as follows:

Context. putImageData (canvasData, 0, 0 );

5. References
Dai zhenjun ImageFilter open source project