Vue realizes sliding puzzle verification code.

Using clip () method and drawImage () method of canvas, the clipping area of the original picture is copied into slider canvas, and a blank area is left on the original picture. Set the position of the slider canvas to an absolute position, and add a mouse event listener to control the movement of the slider.

Step 1: Create a tool class for generating random verification codes and an interface for receiving verification codes. The main function of the tool class is to generate random verification codes and corresponding pictures. The function of the interface is to save the generated random verification code into the session, at the same time, base64 encode the picture, and then return to the front end.

If used in a project, the verification code image should be returned by the interface. ImageView and its subclasses support fancy loading images. 2 Inherited from ImageView, we don't have to interfere with drawing itself, and we don't have to worry about scaleType, which saves a lot of work.

Sliding method: there is a simple slider verification code, which is simple to verify. Drag the slider on the left to the right. Drag to the far right to complete the verification. There are signs that the verification has passed. A complex slider is a puzzle-like form. Just drag the slider to the gap position in the figure.

Websites or client applications need to access SMS verification code and mobile phone verification code functions in order to achieve correct operation ... The mobile phone webpage cannot slide to verify the verification code sliding-you can try to switch from extreme speed mode to compatible mode.