使用原生 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));}// 将图片格式化写入二进制流 ByteArrayOutputStreamImageIO.write(image, "jpeg", baos);// 二进制图片数据转 data-uriimageDataURI = "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:[][;charset=][;base64],

怎样使用 data-uri ?

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

CSS 使用:

li {background:url(https://img-blog.csdnimg.cn/2022010622421990569.gif)no-repeatleft center;padding: 5px 0 5px 25px;
}

html 中使用:

star

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

 

参考资源:

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

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


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部