javaWeb如何实现图形验证码

一:问题

         javaWeb如何实现图形验证码:首先感谢 梦蓝樱飞 https://blog.csdn.net/menglanyingfei/article/details/79101580

二:工具

         Intellij Idea

三:原理

        ① 设置响应的文档类型;
        ② 生成随机码;
        ③ 把随机码保存到session中;
        ④ 生成图片;
        ⑤ 把随机码画到内存图片上;
        ⑥ 把内存图片发送到客户端

四:效果图

五:代码

       1):VerifyCode.java 位于实体层,

import java.util.Random;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import javax.imageio.ImageIO;

public class VerifyCode {
    private int w = 70;
    private int h = 35;
    private Random r = new Random();
    // {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
    private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};
    //可选字符
    private String codes = "0123456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
    //背景色
    private Color bgColor = new Color(255, 255, 255);
    // 验证码上的文本
    private String text;
    // 生成随机的颜色
    private Color randomColor() {
        int red = r.nextInt(150);//生成0-150的数字
        int green = r.nextInt(150);
        int blue = r.nextInt(150);
        return new Color(red, green, blue);//返回一个颜色对象
    }

    // 生成随机的字体
    private Font randomFont() {
        int index = r.nextInt(fontNames.length);
        //生成随机的字体名称
        String fontName = fontNames[index];
        //生成随机的样式, 0(无样式), 1(粗体), 2(斜体), 3(粗体+斜体)
        int style = r.nextInt(4);
        //生成随机字号, 24 ~ 28
        int size = r.nextInt(5) + 24;
        return new Font(fontName, style, size);
    }

    // 画干扰线
    private void drawLine(BufferedImage image) {
        int num = 3;//一共画3条
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        for (int i = 0; i < num; i++) {
            //生成两个点的坐标,即4个值
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h);
            g2.setStroke(new BasicStroke(1.5F));
            g2.setColor(Color.BLUE); //干扰线是蓝色
            g2.drawLine(x1, y1, x2, y2);//画线
        }
    }

    // 随机生成一个字符
    private char randomChar() {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    // 创建BufferedImage
    private BufferedImage createImage() {
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        g2.setColor(this.bgColor);
        g2.fillRect(0, 0, w, h);
        return image;
    }

    // 调用这个方法得到验证码
    public BufferedImage getImage() {
        //创建图片缓冲区
        BufferedImage image = createImage();
        //得到绘制环境
        Graphics2D g2 = (Graphics2D) image.getGraphics();
         //用来装载生成的验证码文本
        StringBuilder sb = new StringBuilder();
        // 向图片中画4个字符
        for (int i = 0; i < 4; i++) {//循环四次,每次生成一个字符
            String s = randomChar() + "";//随机生成一个字母
            sb.append(s); //把字母添加到sb中
            float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标
            g2.setFont(randomFont()); //设置随机字体
            g2.setColor(randomColor()); //设置随机颜色
            g2.drawString(s, x, h - 5); //画图
        }
        this.text = sb.toString(); //把生成的字符串赋给了this.text
        drawLine(image); //添加干扰线
        return image;
    }

    // 返回验证码图片上的文本
    public String getText() {
        return text;
    }

    // 保存图片到指定的输出流
    public static void output(BufferedImage image, OutputStream out) throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}

2):VerifyCodeServlet.java  位于servlet层

import com.krt.entity.VerifyCode;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
@WebServlet(name = "VerifyCodeServlet", value = "/VerifyCodeServlet")//注解
public class VerifyCodeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws  IOException {
        //  创建对象
        VerifyCode vc = new VerifyCode();
        //获取图片对象
        BufferedImage bi = vc.getImage();
        //  获得图片的文本内容
        String text = vc.getText();
        //  将系统生成的文本内容保存到session中
        req.getSession().setAttribute("text", text);
        //  向浏览器输出图片
        vc.output(bi, resp.getOutputStream());
    }
}

 3):login.jsp  form表单及script

<form action="login" method="post" class="form_lay">
        <div class="form_tit">
            <img src="skin/images/form_icon_03.png" class="dq"/>
            <span class="form_tittext fyh">用户登录&nbsp;&nbsp;LOGIN</span>
        </div>
        <div class="hr-20"></div>
        <div class="text_layout">
            <input type="hidden" name="opre" value="login">
            <label class="text_lab fyh right_4" for="username">用户名:</label>
            <input type="text"  class="form_text fyh" id="username" name="userName" placeholder="输入用户名"/>
        </div>
        <div class="text_layout">
            <label class="text_lab fyh right_6" for="password">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="password"  class="form_text fyh" name="userPwd" id="password" placeholder="输入密码"/>
        </div>
        <div class="text_layout">
            <label class="text_lab fyh right_4" for="yzm">验证码:</label>
            <input type="text" class="form_text1 fyh" id="yzm" name="yzm" placeholder="验证码"/>
            <img src="/Krt/VerifyCodeServlet">
            <%--<span class="show fyh">SFRW</span>--%>
            <em class="change_yzm fyh" id="btn">看不清,换一个</em>
        </div>
        <div class="hr-30"></div>
        <input type="submit" value="登&nbsp;&nbsp;&nbsp;录" class="button fyh"/>
    </form>


<script type="text/javascript">
    document.getElementById("btn").onclick = function () {
        // 获取img元素
        // 为了让浏览器发送请求到servlet, 所以一定要改变src
        document.getElementsByTagName("img")[1].src =
            "/Krt/VerifyCodeServlet?time=" + new Date().getTime();
    };
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值