day10—验证码

导读:本篇文章讲解 day10—验证码,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

1. 步骤

  1. 利用BufferedImage对象在内存中创建图片对象。
  2. 美化图片
    1. 获取画笔
    2. 设置颜色
    3. 填充背景色用fill/画图用draw
  3. 用ImageIO.write()方法传输图片

2. 效果

在这里插入图片描述

3. 代码

(1)ResponseServlet.java

@WebServlet("/responseServlet")
public class ResponseServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 在内存中方创建图片对象
        int width = 200;
        int height = 100;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        //2.美化图片
        //2.1 填充图片背景色
        Graphics g = image.getGraphics();      //获取画笔
        g.setColor(Color.PINK);
        g.fillRect(0, 0, width, height);
        //2.2 画矩形边框
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, width-1, height-1);
        //2.3 画文字
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        for (int i = 0; i < 4; i++) {
            int index = random.nextInt(str.length());
            char c = str.charAt(index);
            g.setColor(Color.BLUE);
            g.drawString(c+"", width/5*(i+1), height/2);
        }
        //2.4 画干扰线
        for (int i = 0; i < 6; i++) {
            int x1 = random.nextInt(width);
            int x2 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            g.setColor(Color.green);
            g.drawLine(x1, y1, x2, y2);
        }

        //3.传输图片
        ImageIO.write(image, "png", response.getOutputStream());
    }

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

(2)regist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            //1.为图片绑定事件
            var img = document.getElementById("check");
            img.onclick = function () {
                //获取时间戳
                var time = new Date().getTime();
                img.src = "/day7/responseServlet?"+time;    //如果请求路径不变,会返回302,加载缓存中的数据,图片不变
            }
            //2.为超链接绑定事件
            var change = document.getElementById("change");
            change.onclick = function () {
                //获取时间戳
                var time = new Date().getTime();
                img.src = "/day7/responseServlet?"+time;
            }
        }
    </script>
</head>
<body>
    <img id="check" src="/day7/responseServlet">
    <a id="change" href="">看不清,换一张</a>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/84696.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!