Verification code - simple implementation

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
    //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
        //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);
    //12. Output the cached pictures to the response output stream
    //Parameters: picture object, picture format, output stream

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">
    <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>
    <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 class="form-group">
                <label for="password">Password:</label>
                <input type="password" name="password" class="form-control" id="password" placeholder="Please input a password"/>
            <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();
            <div style="text-align: center; padding-top: 20px;">
                <input type="submit" value=" Sign in " class="btn btn-primary"/>

Keywords: Java IE JQuery Javascript

Added by tbone05420 on Tue, 22 Oct 2019 20:59:31 +0300