Verification code algorithm

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 class="container" style="max-width:400px">
	    <h3 style="text-align: center">User login</h3>
	    <form action="login" method="post" >
	    	<div class="form-group">
	    		<label for="name">User name:</label>
	    		<input type="text" name="name" class="form-control" id="name" placeholder="enter one user name">
	    	</div>
	    	<div class="form-group">
	    		<label for="password">Password:</label>
	    		<input type="password" name="password" class="form-control" id="password" placeholder="Please input a password"/>
	    	</div>
			<div class="form-inline">
	    		<label for="vcode">Verification Code:</label>
	    		<input type="text" name="vcode" class="form-control" id="vcode" placeholder="Verification Code" style="width: 70px" maxlength="4"/>&nbsp;
                <!--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 " class="btn btn-primary"/>
	    	</div>
	    </form>
	    </div>
  </body>
</html>

Tags: IE JQuery Javascript

Posted on Mon, 02 Dec 2019 20:20:02 -0500 by gavin1996