Copy the image Verification Code of 12306 and the image Verification Code of 12306

Copy the image Verification Code of 12306 and the image Verification Code of 12306

A simple image Verification Code is intended for a new project.

Let's talk about the idea: on the server side, find 8 images from a folder, and then combine the 8 images into a large image, A user-verified image category, such as puppies and beer, is randomly generated in eight small images. At the front end, when you access this page, load the image, and select the desired image on the image. When you log on to the page, determine whether the selected image is actually verified based on all the coordinates selected by the user.

Put two images first:

To make file search easier, the structure of the image file can be as follows:

// Select eight images in the public static List <Object> getEightImages () {// Save the path of each image obtained, ensure that the image does not repeat the List <String> paths = new ArrayList <String> (); File [] finalImages = new File [8]; list <Object> object = new ArrayList <Object> (); // save tipsString [] tips = new String [8]; for (int I = 0; I <8; I ++) {// obtain the random List Directory int dirIndex = getRandom (secondaryDirNumbers); File secondaryDir = getFiles () [dirIndex]; // Save the random folder name to tips. tips [I] = secondaryDir. getName (); // obtain the File [] images = secondaryDir. listFiles (); int imageIndex = getRandom (imageRandomIndex); File image = images [imageIndex]; // deduplicated image = dropSameImage (image, paths, tips, I); paths. add (image. getPath (); finalImages [I] = image;} object. add (finalImages); object. add (tips); return object ;}

In the eight images generated, 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 images you want to select. Because the array is ordered, You can traverse the elements in the array and obtain the location of each key classification image to facilitate matching during user verification.

// Obtain the position. The returned result is the first image, not the subscript. Starting from 1, the first element of the set is tippublic static List <Object> getLocation (String [] tips) {List <Object> locations = new ArrayList <Object> (); // obtain the Key category String tip = getTip (tips); locations. add (tip); int length = tips. length; for (int I = 0; I <length; I ++) {if (tip. equals (tips [I]) {locations. add (I + 1) ;}} return locations ;}

 

After 8 images are selected, merge the images. The BufferedImage method can be used to merge images: setRGB (). If you do not understand this method, you can refer to the api documentation, which provides detailed instructions.

Public static void mergeImage (File [] finalImages, HttpServletResponse response) throws IOException {// read the image BufferedImage mergeImage = new BufferedImage (800,400, BufferedImage. TYPE_INT_BGR); for (int I = 0; I <8; I ++) {File image = finalImages [I]; BufferedImage bufferedImage = ImageIO. read (image); int width = bufferedImage. getWidth (); int height = bufferedImage. getHeight (); // read RGB int [] imageBytes = new int [width * height] From the image; imageBytes = bufferedImage. getRGB (0, 0, width, height, imageBytes, 0, width); if (I <4) {mergeImage. setRGB (I * 200, 0, width, height, imageBytes, 0, width);} else {mergeImage. setRGB (I-4) * 200,200, width, height, imageBytes, 0, width) ;}} ImageIO. write (mergeImage, "jpg", response. getOutputStream (); // ImageIO. write (mergeImage, "jpg", destImage );}

 

 

In the controller layer, the key category is saved to the session, prompting the user to select the image category and determining the image verification. Then output the image stream to response to generate the verification image.

　　

Response. setContentType ("image/jpeg"); response. setHeader ("Pragma", "No-cache"); response. setHeader ("Cache-Control", "no-cache"); response. setDateHeader ("Expires", 0); List <Object> object = ImageSelectedHelper. getEightImages (); File [] finalImages = (File []) object. get (0); String [] tips = (String []) object. get (1); // The Image Location of all keys, that is, the List of images that the user must select <Object> locations = ImageSelectedHelper. getLocation (tips); String tip = locations. get (0 ). toString (); System. out. println (tip); session. setAttribute ("tip", tip); locations. remove (0); int length = locations. size (); for (int I = 0; I <length; I ++) {System. out. println ("actual Key Image Location:" + locations. get (I ));}
Session. setAttribute ("locations", locations); ImageMerge. mergeImage (finalImages, response );

 

In jsp, small image tags are generated for users' clicks. When you click an image, add a sub-div label to the parent div, locate it as relative, set zIndex, and then add an img label to the div, locate as absolute. When a user clicks, he or she can obtain the click event, click the event to obtain the click coordinates, and then subtract the coordinates of the parent div to obtain the relative coordinates. You can set the coordinate origin point based on your preferences. The coordinate origin point here is the lower right corner of the 8th images.

　　

<Div>
<Div id = "base">
/identify "> public List <Integer> isPass (String result) {String [] xyLocations = result. split (","); // Save the List of images on which the user selected coordinates belong <Integer> list = new ArrayList <Integer> (); // each group of coordinates System. out. println ("number of images selected:" + xyLocations. length); for (String xyLocation: xyLocations) {String [] xy = xyLocation. split ("\\|\|"); int x = Integer. parseInt (xy [0]); int y = Integer. parseInt (xy [1]); // if (x>-75 & x <= 0) {if (y>-75 & y <= 0) {// list No. 8. add (8);} else if (y >=- 150 & y <=-75) {// list 4. add (4) ;}} else if (x>-150 & x <=-75) {// 7, 3. if (y>-75 & y <= 0) {// list 7. add (7);} else if (y >=- 150 & y <=-75) {// list 3. add (3) ;}} else if (x>-225 & x <=-150) {// 6, 2. if (y>-75 & y <= 0) between image areas {// list 6. add (6);} else if (y >=- 150 & y <=-75) {// list 2. add (2) ;}} else if (x >=- 300 & x <=- 225) {// 5, 1. if (y>-75 & y <= 0) between image areas {// list No. 5. add (5);} else if (y >=- 150 & y <=-75) {// list 1. add (1) ;}} else {return null ;}} return list ;}

 

 

Refresh to generate new images. Because ajax does not support binary streams, you can use the native xmlHttpRequest object and html5 blob to complete the process.

Function refresh () {var url = "<% = request. getContextPath () %>/identify "; var xhr = new XMLHttpRequest (); xhr. open ('get', url, true); xhr. responseType = "blob"; xhr. onload = function () {if (this. status = 200) {var blob = this. response; // release blob bigPicture after successful loading. onload = function (e) {window. URL. revokeObjectURL (bigPicture. src) ;}; bigPicture. src = window. URL. createObjectURL (blob) ;}} xhr. send ();

The entire verification code has been completed, and some details need to be processed. Since images are easy to be recognized by Baidu, We have to blur the generated images. We have no idea of any good solutions yet ~