Verification Code:
Create cached image: specify width=90,height=30
Get brush object
Set brush color
Fill rectangular area
The characters char[] arr = {'A', 'B', 'C', 'D', 'N', 'E', 'W', 'B', 'o', 'y', '1', '2', '3', '4', '5', '6'} are randomly obtained from the character array.
Cycle 4 times, draw 4 characters
Set the color of the word to random
Set the font size to 18.
Draw each character to the picture, x increases, y does not change. 10+(i*20), 20
The position of the line is random, the x range is in width, and the y range is in height.
Draw 8 interference lines, each with different color
Output cached pictures to response output stream
Verification code Servlet code
@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"/> <!--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>