Verification Code:
This verification code is developed by myself with reference to other people's ideas. The printing effect is general and not very good-looking, but you can take part in a thought.
First of all, we need to give a box, which knows the height and width.
Random number: it needs to generate a random number, a method to generate a color randomly, and provide X (width) and Y (height) with constant changes;
Font color: red, green and blue are combined according to different proportions, and the value of color is between (0-255)
Interference line: eight interference lines are set here; the position of the lines is random, the x range is in the width, and the y range is randomly generated in the height.
@WebServlet(name = "PicCodeServlet", urlPatterns = "/code") public class PicCodeServlet extends HttpServlet { //Create a random class private Random ran = new Random(); //Write a method to randomly generate a color private Color getRandomColor() { //Randomly generate numbers between 0 and 255 int red = ran.nextInt(256); int green = ran.nextInt(256); int blue = ran.nextInt(256); //Red, green, blue return new Color(red, green, blue); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. Create a cached picture int width = 90, height = 30; //Parameters: width, height, picture mode BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); //2. Get brush object Graphics graphics = img.getGraphics(); //3. Set brush color graphics.setColor(Color.WHITE); //4. Fill rectangular area graphics.fillRect(0, 0, width, height); //5. Get characters randomly from character array char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y', '1', '2', '3', '4','5','6' }; //6. Cycle 4 times and draw 4 characters for (int i = 0; i < 4; i++) { //7. Set the color of the word to random graphics.setColor(getRandomColor()); //8. Set font size to 18 graphics.setFont(new Font(Font.SANS_SERIF,Font.BOLD+Font.ITALIC,19)); //Get subscript randomly int index = ran.nextInt(arr.length); char c = arr[index]; //Get a character at random //9. Draw each character to the picture, increase x, and leave y unchanged. graphics.drawString(String.valueOf(c),10+(i*20), 20); } //11. Draw 8 interference lines with different colors for (int i = 0; i < 8; i++) { //10. The position of the line is random, the x range is in width, and the y range is in height. int x1 = ran.nextInt(width); int y1 = ran.nextInt(height); int x2 = ran.nextInt(width); int y2 = ran.nextInt(height); graphics.setColor(getRandomColor()); graphics.drawLine(x1,y1,x2,y2); } //12. Output the cached pictures to the response output stream //Parameters: picture object, picture format, output stream ImageIO.write(img,"jpg",response.getOutputStream()); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }
Login is used to verify the effect. You can also directly get your own project to try the effect. This login page is randomly checked. The page effect is ugly, and some styles are not imported.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Login page</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div style="max-width:400px"> <h3 style="text-align: center">User login</h3> <form action="login" method="post" > <div> <label for="name">User name:</label> <input type="text" name="name" id="name" placeholder="enter one user name"> </div> <div> <label for="password">Password:</label> <input type="password" name="password" id="password" placeholder="Please input a password"/> </div> <div> <label for="vcode">Verification Code:</label> <input type="text" name="vcode" id="vcode" placeholder="Verification Code" style="width: 70px" maxlength="4"/> <!--Verification Code--> <img id="imgCode" src="code" style="width: 90px; height: 30px; cursor: pointer;" title="Can't see clearly, click refresh"> <script type="text/javascript"> //Picture click event document.getElementById("imgCode").onclick = function () { this.src = "code?t=" + new Date().getTime(); }; </script> </div> <div style="text-align: center; padding-top: 20px;"> <input type="submit" value=" Sign in "/> </div> </form> </div> </body> </html>