用JSP生成验证码图片并显示在网页
in with 0 commentand 113 read

用JSP生成验证码图片并显示在网页

in with 0 commentand 114 read

目标:随机生成验证码图片+前端界面调用 + 刷新切换

实现步骤


先看看效果图:


后端生成随即图实现代码:

package cn.coder.CheckCode;

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.IOException;
import java.util.Random;

@WebServlet("/checkcode")
public class CheckCodedemo extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        // 创建验证码图片对象
        int width = 200;
        int height = 100;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        // 美化图片
        Graphics g = image.getGraphics();
        Font font = new Font("Microsoft YaHei", Font.BOLD, 30); // 创建字体对象
        g.setColor(Color.PINK);
        g.fillRect(0, 0, width, height); // 填充背景颜色
        g.setFont(font); // 设置字体

        g.setColor(Color.BLUE);
        g.drawRect(0, 0, width - 1, height - 1); // 画上边框 主题边框默认1px宽

        // 随机生成字母数字
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
        int len = str.length();
        Random random = new Random();

        g.drawString("" + str.charAt(random.nextInt(len)), random.nextInt(5) + 30, random.nextInt(40) + 35);
        g.drawString("" + str.charAt(random.nextInt(len)), random.nextInt(5) + 80, random.nextInt(40) + 35);
        g.drawString("" + str.charAt(random.nextInt(len)), random.nextInt(5) + 120, random.nextInt(40) + 35);
        g.drawString("" + str.charAt(random.nextInt(len)), random.nextInt(5) + 160, random.nextInt(40) + 35);

        // 画干扰线
        g.setColor(Color.green);
        g.drawLine(3, 44, 188, 60);
        g.drawLine(20, 20, 150, 67);
        g.drawLine(5, 88, 199, 60);
        // 写进网页
        ImageIO.write(image, "png", resp.getOutputStream());
        System.out.println("success...");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

前端html调用调用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码图片调用</title>
</head>
<body>
    <img id="vercode" src="/test/checkcode" alt="">
    <a id="" href="">看不清换一张?</a>
<script>
    window.onload = function () {
        var vercode = document.getElementById("vercode");
          /**
        为防止浏览器缓存图片,所以每次切换验证码图片 都应是不同的请求  所以我们应该给请求加不同的请                 求参数。 在浏览器中  时间戳 (有永不重复的特点) 
        所以加一个时间戳 来实现每次请求更换 验码图
               */
        vercode.onclick = function () {
            var date = new Date().getTime(); // 获取时间戳 (永不重复的特点)
            code.src = "/test/cc?" + date;
        }
    }
</script>
</body>
</html>
评论