项目中可能会用到图形验证码的功能,源码分享给大家。以下是实际效果图:
一、后端JAVA代码
1.生成图形验证码工具类
public class imgVerifyCode {
private int weight = 100; //验证码图片的长和宽
private int height = 40;
private String text; //用来保存验证码的文本内容
private Random r = new Random(); //获取随机数对象
//private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"}; //字体数组
//字体数组
private String[] fontNames = {"Georgia"};
//验证码数组
private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
/**
* 获取随机的颜色
*
* @return
*/
private Color randomColor() {
int r = this.r.nextInt(225); //这里为什么是225,因为当r,g,b都为255时,即为白色,为了好辨认,需要颜色深一点。
int g = this.r.nextInt(225);
int b = this.r.nextInt(225);
return new Color(r, g, b); //返回一个随机颜色
}
/**
* 获取随机字体
*
* @return
*/
private Font randomFont() {
int index = r.nextInt(fontNames.length); //获取随机的字体
String fontName = fontNames[index];
int style = r.nextInt(4); //随机获取字体的样式,0是无样式,1是加粗,2是斜体,3是加粗加斜体
int size = r.nextInt(10) + 24; //随机获取字体的大小
return new Font(fontName, style, size); //返回一个随机的字体
}
/**
* 获取随机字符
*
* @return
*/
private char randomChar() {
int index = r.nextInt(codes.length());
return codes.charAt(index);
}
/**
* 画干扰线,验证码干扰线用来防止计算机解析图片
*
* @param image
*/
private void drawLine(BufferedImage image) {
int num = r.nextInt(10); //定义干扰线的数量
Graphics2D g = (Graphics2D) image.getGraphics();
for (int i = 0; i < num; i++) {
int x1 = r.nextInt(weight);
int y1 = r.nextInt(height);
int x2 = r.nextInt(weight);
int y2 = r.nextInt(height);
g.setColor(randomColor());
g.drawLine(x1, y1, x2, y2);
}
}
/**
* 创建图片的方法
*
* @return
*/
private BufferedImage createImage() {
//创建图片缓冲区
BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics2D g = (Graphics2D) image.getGraphics();
//设置背景色随机
// g.setColor(new Color(255, 255, r.nextInt(245) + 10));
g.setColor(Color.white);
g.fillRect(0, 0, weight, height);
//返回一个图片
return image;
}
/**
* 获取验证码图片的方法
*
* @return
*/
public BufferedImage getImage() {
BufferedImage image = createImage();
Graphics2D g = (Graphics2D) image.getGraphics(); //获取画笔
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 4; i++) //画四个字符即可
{
String s = randomChar() + ""; //随机生成字符,因为只有画字符串的方法,没有画字符的方法,所以需要将字符变成字符串再画
sb.append(s); //添加到StringBuilder里面
float x = i * 1.0F * weight / 4; //定义字符的x坐标
g.setFont(randomFont()); //设置字体,随机
g.setColor(randomColor()); //设置颜色,随机
g.drawString(s, x, height - 5);
}
this.text = sb.toString();
drawLine(image);
return image;
}
/**
* 获取验证码文本的方法
*
* @return
*/
public String getText() {
return text;
}
public static void output(BufferedImage image, OutputStream out) throws IOException //将验证码图片写出的方法
{
ImageIO.write(image, "JPEG", out);
}
}
由于项目需求,图形验证码的背景色我改为白色了,可根据自身情况选择图片背景色
//设置背景色随机
// g.setColor(new Color(255, 255, r.nextInt(245) + 10));
g.setColor(Color.white);
2.生成验证码接口
@RequestMapping("/getVerifiCode.action")
@ResponseBody
public String getVerifiCode(Map<String, Object> requestMap, HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException {
ImageVerificationCode ivc = new ImageVerificationCode(); //使用验证码类,生成验证码类对象
BufferedImage image = ivc.getImage(); //获取验证码
request.getSession().setAttribute("text", ivc.getText()); //将验证码的文本存在session中
ivc.output(image, response.getOutputStream());//将验证码图片响应给客户端
request.setCharacterEncoding("utf-8");
String session_vcode=(String) request.getSession().getAttribute("text"); //从session中获取真正的验证码
return session_vcode;
}
3.校验验证码接口
@RequestMapping(value = "/checkVerify", method = RequestMethod.POST, headers = "Accept=application/json")
@ResponseBody
public boolean checkVerify(@RequestParam String verifyInput, HttpSession session) {
try {
//从session中获取随机数
String inputStr = verifyInput;
String random = (String) session.getAttribute("text");
if (random == null || "".equals(random) || !random.equalsIgnoreCase(inputStr)) {
return false;
} else {
return true;
}
} catch (Exception e) {
log.error("验证码校验失败", e);
return false;
}
}
4.拦截器
不要忘记把拦截器放行这两个接口
二、HTML
<div class="form-group">
<input type="text" id="verify_input" name="title" class="form-control" placeholder="验证码" autocomplete="off" />
<div id="verify_image" style="margin: -43px 0px 3px 200px;">
<img id="imgVerify" style="color: white; cursor:pointer;width: 100px;height: 38px;margin: -38px -32px -22px 0;border-radius: 4px;" title="刷新验证码" onclick="getVerify(this);">
</div>
</div>
三、JS
function getVerify() {
$("#verify_input").val("");
$("#imgVerify").attr("src", './getVerifiCode.action?' + Math.random());//jquery方式
}
function aVerify() {
let value = $("#verify_input").val();
if (value == '') {
alert('[[#{login.hint10}]]');
return 0;
}
$.ajax({
async: false,
type: 'post',
url: './checkVerify',
dataType: "json",
data: {
verifyInput: value
},
success: function (result) {
if (result) {
.....//验证用户名密码逻辑
} else {
alert("验证码输入错误,请重新输入!");
getVerify();
}
}
});
}