JavaWeb：生成简单随机图片验证码返回给客户端-CFANZ编程社区

本质：图片

目的：防止恶意表单注册

生成方式：程序动态生成

步骤

创建一对象，在内存中代表图片(验证码图片对象)
美化图片
将图片输出到页面展示

知识点

使用BufferedImage创建图片对象。
接收三个参数：宽、高、图片类型。
美化图片
０、画布中，(0,0)原始左边点为图片左上角。
Ⅰ、可以通过image对象中的getGraphics()获取画笔对象。
Ⅱ、画笔对象中，可以通过setColor()设置画笔颜色。
Ⅲ、画笔对象中，fill开头的方法为填充。
Ⅳ、画笔对象中，draw开头的方法为绘制。
Ⅴ、画笔对象中，fillRect()可以填充一个矩形，接收四个参数。
       （起始x坐标，起始y坐标，填充宽度，填充高度）。
Ⅵ、画笔对象中，drawRect可以绘制一个矩形，接收四个参数。
       （起始x坐标，起始y坐标，绘制宽度，绘制高度）。
Ⅶ、画笔对象中，drawString可以绘制字符串，接收三个参数。
       （字符串，绘制x坐标，绘制y坐标）。
Ⅷ、画笔对象中，drawLine可以绘制线，接收四个参数。
       （点1x，点1y，点2x，点2y）。
借助ImageIO对象中的write()方法，可以将图片输出到界面中或者任意的流中。
接收三个参数：（图片对象、后缀名、流）。
借助getOutputStream输出流可以将图片输出到界面中。

代码

package cn.itcast.web.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 doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        int width = 100;
        int height = 50;

        //1.创建一对象，在内存中代表图片(验证码图片对象)
        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.BLUE);
        g.drawRect(0, 0, width - 1, height - 1);

        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
        //生成随机角标
        Random ran = new Random();

        for (int i = 1; i <= 4; i++) {
            int index = ran.nextInt(str.length());
            //获取字符
            char ch = str.charAt(index);//随机字符
            //2.3写验证码
            g.drawString(ch + "", width / 5 * i, height / 2);
        }


        //2.4画干扰线
        g.setColor(Color.GREEN);

        //随机生成坐标点

        for (int i = 0; i < 10; i++) {
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);

            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            g.drawLine(x1, y1, x2, y2);
        }


        //3.将图片输出到页面展示
        ImageIO.write(image, "jpg", response.getOutputStream());


    }

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

前端

控制更换图片，通过点击事件，发送带有时间戳的get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        /*
            分析：
                点击超链接或者图片，需要换一张
                1.给超链接和图片绑定单击事件

                2.重新设置图片的src属性值

         */
    window.onload = function(){
        //1.获取图片对象
        var img = document.getElementById("checkCode");
        //2.绑定单击事件
        img.onclick = function(){
            //加时间戳
            var date = new Date().getTime();

            img.src = "/day15/checkCodeServlet?"+date;
        }

    }


    </script>


</head>
<body>


    <img id="checkCode" src="/day15/checkCodeServlet" />

    <a id="change" href="">看不清换一张？</a>

</body>
</html>