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

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!

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.