JavaWeb简易随机图片验证码

通过简单的Servlet和HTML实现简易随机图片验证码

效果图

alt 效果图
可以根据需要再修改图片效果

代码

Servlet代码(该有的注释都有了)

package servlet.OutImage;

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("/responseDemo4")
public class ResponseDemo4 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设定验证码图片宽高
        int width = 100;
        int height = 50;
        //创建图片对象
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        //获取图片画笔对象
        Graphics g = image.getGraphics();
        //设置画笔颜色
        g.setColor(Color.PINK);
        //填充图片背景(底色)
        g.fillRect(0,0,width,height);
        //画边框 画不画都无所谓
        g.setColor(Color.RED);
        g.drawRect(0,0,width-1,height-1);//这里不减1的话 会画超出图片界限
        //生成字符表
        String str = "qwertyuiopasdfghjklzxcvbnm0123456789QWERTYUIOPASDFGHJKLMNBVCXZ";
        Random random = new Random();
        g.setColor(Color.BLACK);
        //设置字体 微软雅黑 加粗 大小20 注意图像的大小
        Font font = new Font("微软雅黑",Font.BOLD,20);
        g.setFont(font);
        //循环次数代表有多少个字符
        for (int i = 0; i < 4; i++) {
            //写字符到图片中
            //x算式里的4表示循环次数 计算结果使字符居中于图像
            //y随机实现浮动效果
            g.drawString(String.valueOf(str.charAt(random.nextInt(str.length()))),
                    (font.getSize()*i)+(width/(4*2)),
                    font.getSize()+random.nextInt(height-font.getSize()));
        }
        //画干扰线 4个值表示两个点 两点确定一条直线
        //这里可以让两个点的值相同 再设置颜色 可以生成噪点 而不是线
        g.setColor(Color.BLUE);
        for (int i = 0; i < 15; i++) {
            int x1 = random.nextInt(width);
            int x2 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }
        //输出图片
        ImageIO.write(image,"jpg",response.getOutputStream());
    }

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

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册验证码</title>
    <script>
        window.onload=function () {
            var image = document.getElementById('change');
            image.onclick=function () { image.src = '/responseDemo4?'+ new Date().getTime() };
            var a = document.getElementById('changelink');
            a.onclick=function () { image.src = '/responseDemo4?'+ new Date().getTime() };
        };
    </script>
</head>
<body>
<img id="change" src="/responseDemo4"/><br>
<a id="changelink" href="#">看不清楚？换一张</a>
</body>
</html>

来源：CSDN

作者：铭铭铭铭铭铭就

链接：https://blog.csdn.net/qq309648008/article/details/103939405

标签

font