使用原生 Java 玩转验证码【含 DATA-URIS 介绍】

开篇前的废话：

       验证码是日常简单开发中经常会用到的东西，作为防止暴力破解密码的一道屏障。所以开发者必须掌握如何使用。废话不多说，直接上代码。

工具类：VerifyCodeUtil

import sun.misc.BASE64Encoder;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;

public class VerifyCodeUtil {
    // 验证码字符集
    private static final char[] chars = {
            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
            'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
            'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};
    // 字符数量
    private static final int SIZE = 4;
    // 干扰线数量
    private static final int LINES = 17;
    // 宽度
    private static final int WIDTH = 130;
    // 高度
    private static final int HEIGHT = 40;
    // 字体大小
    private static final int FONT_SIZE = 35;

    /**
     * 生成随机验证码及图片
     * Object[0]：验证码字符串；
     * Object[1]：验证码图片 data-uri 格式。
     */
    public static Object[] createImage() {
        // 存储验证码的值
        StringBuffer sb = new StringBuffer();
        // 存储最终生成图片的二进制数据
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        // 存储转码之后的 image 数据
        String imageDataURI = null;
        try {
            // 创建空白图片
            BufferedImage image = new BufferedImage(
                    WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
            // 获取图片画笔
            Graphics graphic = image.getGraphics();
            // 设置画笔颜色
            graphic.setColor(Color.WHITE);
            // 绘制矩形背景
            graphic.fillRect(0, 0, WIDTH, HEIGHT);

            // 画随机字符
            Random ran = new Random();
            for (int i = 0; i < SIZE; i++) {
                // 取随机字符索引
                int n = ran.nextInt(chars.length);
                // 设置随机颜色
                graphic.setColor(getRandomColor());
                // 设置字体大小
                graphic.setFont(new Font(
                        "Dialog", Font.BOLD + Font.ITALIC, FONT_SIZE));
                // 画字符
                graphic.drawString(
                        chars[n] + "", i * WIDTH / SIZE, HEIGHT / 5 * 4 );
                // 记录字符
                sb.append(chars[n]);
            }

            // 画干扰线
            for (int i = 0; i < LINES; i++) {
                // 设置随机颜色
                graphic.setColor(getRandomColor());

                // 随机画线
                graphic.drawLine(ran.nextInt(WIDTH-2), ran.nextInt(HEIGHT-2),
                        ran.nextInt(WIDTH), ran.nextInt(HEIGHT));
            }

            // 将图片格式化写入二进制流 ByteArrayOutputStream
            ImageIO.write(image, "jpeg", baos);
            // 二进制图片数据转 data-uri
            imageDataURI = "data:image/jpeg;base64," + (new BASE64Encoder().encode(baos.toByteArray()));
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            return new Object[]{sb.toString().toLowerCase(), imageDataURI};  // 验证码的值传出时已经进行了小写转换
        }
    }

    /**
     * 随机取色
     */
    private static Color getRandomColor() {
        Random ran = new Random();
        Color color = new Color(ran.nextInt(230),
                ran.nextInt(230), ran.nextInt(230));
        return color;
    }
}

           

原理就是利用 Java GUI 工具类，从给定范围（数字与大小写字母），随机选取一定数量的字符，然后绘制图片，再绘制干扰线，最后获得图片元数据（及二进制数据）。因为当前前端开发经常使用 data-uri，图片数据为了使用处理方便，这里也直接进行转换，直接返回给前端是 data-uri 格式的字符串，而不是一个图片文件。

小小的补充：

data-uri 编码也很简单，就是”前缀“+”使用BASE64处理之后的元数据“。

<!-- data-uri: 格式 -->
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
           

怎样使用 data-uri ？

这个很简单，直接给出样例，不解释。

CSS 使用：

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}
           

html 中使用：

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
           

其实浏览器支持自动解析的，只需粘贴到浏览器地址栏便可以直接看到图片，如图

参考资源：

https://css-tricks.com/data-uris/

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs