How to use canvas to achieve Image filter effect
Editor to share with you how to use canvas to achieve picture filter effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
1. Get image data
Img.src = 'https://cache.yisu.com/upload/information/20220117/488/19974.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)
two。 Set filter matrix
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
one,
two,
]
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
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 // 加上黑色的边框 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
Context.putImageData (canvasData, 0,0)
The above is all the content of the article "how to use canvas to achieve picture filter effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
