graphics.drawString完成注册页面的随机验证码生成，GUI，GDI

声明：使用JDK9，Tomcat9，

整体思路：

①生成一个width ，height 的image ，

②在image中设置颜色，书写字体，干扰线，干扰点；

③通过 ImageIO 把生成的验证码image响应给浏览器；

其中设置字体 Font 存在三种字体，加粗，斜体，加粗 &斜体；

package www.baidu.servlets;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Random;

@WebServlet(name = "CodeServlet", urlPatterns = "/codeServlet")
public class CodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);//
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //验证码生成   height=60px   with=30px   随机生成4位
        int height = 30, width = 120;
        String data = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
        Random random = new Random();
        //使用画板 画出一个矩形
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
        Graphics graphics = image.getGraphics();
        graphics.setColor(Color.BLACK);
        graphics.fillRect(0, 0, width, height);//参数分别指定矩形的左上角坐标，以及长宽；fillRect 矩形的左上边界
        graphics.setColor(Color.WHITE);
        graphics.fillRect(1, 1, width - 2, height - 2);
        //设置字体
        image.getGraphics().setFont(new Font("微软雅黑", Font.BOLD | Font.ITALIC | Font.PLAIN | Font.BOLD + Font.ITALIC, 25));//设置的width=30
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 6; i++) {//随机长度6的字体
            graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));//范围是r, g, b的范围是 255
            //随机字
            int j = random.nextInt(data.length());//获取下标
            String str = data.substring(j, j + 1);
            //把生成的随机字写入在img 中
            graphics.drawString(str,width/6*(i+1) ,20 );//str是要绘制的string，xy是指左下角的坐标  todo
            sb.append(str);
        }
        //把验证码保存到session中
        request.getSession().setAttribute("code", sb.toString());
        //干扰线,以及干扰点
        for (int i = 0; i < 3; i++) {
            graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));//范围是r, g, b的范围是 255
            graphics.drawLine(random.nextInt(width),random.nextInt(height) , random.nextInt(width),random.nextInt(height));//x1 , y1,  x2 ,y2 参数
            graphics.drawOval(random.nextInt(width),random.nextInt(height) , width, height);//x,y,width,height参数
        }
            //response  给浏览器
        ImageIO.write(image, "png",response.getOutputStream());//image,formatName,output 参数
        //new File(path)
    }


}

静态页面，在 img 上【验证码上】绑定单击onclick()事件，有点击事件发生就访问servlet；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function change(obj) {
            //get请求  使用?拼接参数
            obj.src = "/codeServlet?"+new Date().getTime();
        }
    </script>
</head>
<body>
<form action="/codeServlet" method="post">
    账号<input type="text" name="username"><br>
    密码<input type="password" name="password"><br>
    验证码<input type="text" name="code">
    <img src="/codeServlet" alt="验证码" style="cursor: pointer" onclick="change(this);"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

启动Tomcat，访问静态页面效果如下，生成 6位随机验证码：

graphics.drawString完成注册页面的随机验证码生成，GUI，GDI

猜你喜欢