Java imitation 12306 picture verification code

Due to a new project, I intend to make a simple picture verification code.

Let's talk about the idea first: on the server side, find 8 pictures from a folder, then combine the 8 pictures into a large picture, and randomly generate a picture classification to be verified by the user in the 8 small pictures, such as dog, beer, etc. At the front end, when accessing this page, load the picture. The user selects the picture required for prompt on the picture. When the user clicks login, judge whether the selected picture is an actual verification picture according to all coordinates selected by the user.

Put two renderings first:

In order to make the file search easier, the picture file structure can be as follows:

In this way, it is convenient to generate the key picture to be selected by the user, and take out 8 small pictures and merge them into a large picture.

Code: This is to select 8 pictures, and recursion is used to ensure that the selected pictures will not be repeated when selecting each picture.

In the generation of these 8 pictures, an array is used to save all file categories. In this category, you can use a random number to select a category as the key category, that is, all the pictures you want to select. Because the array is ordered, you can traverse the elements in the array to obtain the location of each key classification image, which is convenient for matching during user authentication.

After selecting 8 pictures, the next step is to merge the pictures. The bufferedimage method: setrgb () can be used to merge images. If you don't understand this method, you can see the API document, which has a detailed description.

In the controller layer, first save the key classification to the session to prompt the user to select the image classification and judge the image verification. Then output the picture stream to the response to generate the verification picture.

In JSP, small picture tags are generated for user clicks. When the user clicks the picture, add a child div label on the parent div, locate it as relative, set zindex, and then add an img label on the div as absolute. When the user clicks, you can obtain the click event, obtain the click coordinates according to the click event, and then subtract the coordinates of the parent div to obtain the relative coordinates. You can set the coordinate origin according to your preference. The coordinate origin here is the lower right corner of the eighth picture. 　　

After the user chooses to log in, the server side judges according to the user's selected coordinates

Refresh to generate new pictures. Because Ajax does not support binary streams, you can use the native XMLHttpRequest object and HTML5 blob to complete it.

The overall code of the verification code is completed, and there are still some details to deal with.

The above is the whole content of this article. I hope it will be helpful to your study.