HTML5 uses canvas to achieve the effect of converting pictures to sketches

This chapter will introduce you to how HTML5 uses canvas to achieve the effect of converting pictures to sketches. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Sketch filter principle:
The most basic algorithm is:
1. Decolorization; (Decolorization formula: gray = 0.3 red 0.59 green 0.11 * blue)
2. Copy Color layer, and invert the color;
3. Perform Gaussian blur on the inverted image;
4. Select the color dodge effect in the overlay mode of the blurred image.
Dodging formula: C =MIN(A (A×B)/(255-B),255), where C is the mixing result, A is the pixel after decolorization, and B is the pixel after Gaussian blur .

Let’s take a look at the effect comparison chart first:

sigma can adjust the effect.

Code example:

    
        
        
    

    
        

            
            

            
            
            sigma：0.8
            

            下载
        
        
        

        
        
    

The above is all the code for converting images to sketches using canvas. You can compile and debug it yourself.

The above is the detailed content of HTML5 uses canvas to achieve the effect of converting pictures to sketches. For more information, please follow other related articles on the PHP Chinese website!