生成图片验证码思路及简单实现

** 后台验证码Servlet实现**

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("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//        response.setCharacterEncoding("utf-8");
        // 设置编码格式
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json; charset=utf-8");
        // 图片类,参数为:宽、高、图片类型。
        // TYPE_INT_BGR表示一个具有 8 位 RGB 颜色分量的图像,对应于 Windows 或 Solaris 风格的 BGR 颜色模型,具有打包为整数像素的 Blue、Green 和 Red 三种颜色。
        BufferedImage image = new BufferedImage(120,40,BufferedImage.TYPE_INT_BGR);
        // 获取画笔
        Graphics g = image.getGraphics();
        // 将图片填充颜色
        g.setColor(new Color(0xFF3399));
        // 将颜色全部填充到图片里面
        g.fillRect(0,0,120,40);
        // 设置字符串用于随机生成验证码四个字母或数字
        String str = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
        Random random = new Random();
        for (int i = 1; i < 5; i++) {
            // 随机获取一个字符
            String code = str.charAt(random.nextInt(str.length())) + "";
            System.out.println(code);
            // 设置画笔的字体、样式等
            g.setFont(new Font("",Font.BOLD,24));
            // 设置画笔颜色
            g.setColor(Color.ORANGE);
            // 画笔以字符串形式将随机获取的字符写到 生成的图片上
            g.drawString(code,19*i,27);
        }
        // 将图片输出到页面
        ImageIO.write(image,"jpg",response.getOutputStream());

    }
}

前端图片验证码页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="CheckCodeServlet" onclick="fun(this)">

<script>
    function fun(obj) {
    //    用于每次产生不同的连接,以实现点击验证码刷新验证码图片
    obj.src="CheckCodeServlet?"+ new Date();
    }
</script>
</body>
</html>

最终效果

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值