生成登录时的图片验证码
环境：springboot项目
思路：从后台生成图片，然后传输到前台显示，每次生成的验证码存储在session里
借鉴了别人用java生成图片的方法
直接上代码
前端刚加载登录页面时和每次点击图片获取验证码的url接口
/**生成图片验证码*/
@RequestMapping("verifyCode/ImageCode")
@ResponseBody
public JSONObject produceImageCode(HttpSession session) throws IOException {
JSONObject jobj = new JSONObject();
ImageUtil iu = new ImageUtil();
String code = iu.createImageWithVerifyCode(120,30,4,session);
code = "data:image/png;base64,"+code;
jobj.put("png_base64",code);
return jobj;
}
使用到的ImageUtil类的函数,用于生成带验证码的图片
/**生成验证码图片 转 base64 并且保存图片验证码到session里
* @param width 图片宽度
* @param height 图片高度
* @param session session域 用来保存验证码
* @param length 验证码位数
* @return 图片的base64串*/
public String createImageWithVerifyCode(int width, int height, int length,HttpSession session) throws IOException {
String png_base64="";
//绘制内存中的图片
BufferedImage bufferedImage = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//得到画图对象
Graphics graphics = bufferedImage.getGraphics();
//绘制图片前指定一个颜色
graphics.setColor(getRandColor(160,200));
graphics.fillRect(0,0,width,height);
//绘制边框
graphics.setColor(Color.white);
graphics.drawRect(0, 0, width - 1, height - 1);
// 步骤四 四个随机数字
Graphics2D graphics2d = (Graphics2D) graphics;
graphics2d.setFont(new Font("宋体", Font.BOLD, 18));
Random random = new Random();
VerifyCodeUtil vcu = new VerifyCodeUtil();
String word = vcu.produceNumAndChar(length);
// 定义x坐标
int x = 10;
for (int i = 0; i < word.length(); i++) {
// 随机颜色
graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
// 旋转 -30 --- 30度
int jiaodu = random.nextInt(60) - 30;
// 换算弧度
double theta = jiaodu * Math.PI / 180;
// 获得字母数字
char c = word.charAt(i);
//将c 输出到图片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
//保存验证码
session.setAttribute("img_code",word);
// 绘制干扰线
graphics.setColor(getRandColor(160, 200));
int x1;
int x2;
int y1;
int y2;
for (int i = 0; i < 30; i++) {
x1 = random.nextInt(width);
x2 = random.nextInt(12);
y1 = random.nextInt(height);
y2 = random.nextInt(12);
graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
}
graphics.dispose();// 释放资源
ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
ImageIO.write(bufferedImage, "png", baos);//写入流中
byte[] bytes = baos.toByteArray();//转换成字节
BASE64Encoder encoder = new BASE64Encoder();
png_base64 = encoder.encodeBuffer(bytes).trim();
png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
return png_base64;
}
生成随机的N位数字和字母混合的验证码字符串
这里去掉了字母O和数字0 可以把字母和数字都定义在同一个字符串内
/**生成N位数字和字母混合的验证码
* @param num 验证码位数
* @return code 生成的验证码字符串*/
public String produceNumAndChar(int num){
Random random = new Random();
String code = "";
String ch = "ABCDEFGHIJKLMNPQRSTUVWXYZ";
String n = "123456789";
for(int i=0;i<num;i++){
int flag = random.nextInt(2);
if(flag==0){//数字
code+=n.charAt(random.nextInt(n.length()));
}else{//字母
code+=ch.charAt(random.nextInt(ch.length()));
}
}
return code;
}
前端界面代码和Js代码
<div class="form-group" >
<input type="text" name="img_code" id="img_code" th:value="${img_code}" class="form-control" placeholder="验证码" style="color:gray;float:left;width:180px !important;height:30px !important;" required="required" />
<img id="img" style="float:left;margin-left:20px" onclick="javascript:imgChange()" />
div>
$(function(){
imgChange();
});
function imgChange(){
$.ajax({
type: "POST",
dataType: "json",
url: "/verifyCode/ImageCode" ,
data:{},
success: function (result) {
$("#img").attr('src',result.png_base64)
},
error : function() {
alert("操作发生异常，请刷新页面后再试！");
}
});
}
注意
//在生成图片的时候，验证码我是保存在了Session里的
//保存验证码
session.setAttribute("img_code",word);
//在登录的时候进行验证码是否正确的判断
if(!img_code.equalsIgnoreCase((String)session.getAttribute("img_code"))){
//.......
}
//取seesion里的验证码的时候，最好捕获下session的异常
//登录成功的话进行session的销毁
try{
session.removeAttribute("img_code");
}catch(Exception e){
//.......
}
效果图
