类似这样的效果
这个也是借鉴与网上大佬的,不多说直接上代码
后台:
package com.attendance.utils;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;
public class RandomValidateCodeUtil {
private static String RANDOMCODEKEY = "RANDOMVALIDATECODEUTIL";
private String randString = "0123456789";//随机字符串
private int width = 95; //图片宽
private int height = 25; //图片高
private int lineSize = 40; //干扰线数量
private int stringNum = 4;//随机产生字符数量
private Random random = new Random();
/**
* 获取字体
*/
private Font getFont(){
return new Font("Fixedsys",Font.CENTER_BASELINE,18);
}
/**
* 获取颜色
* @param fc
* @param bc
* @return
*/
private Color getRandColor(int fc,int bc){
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc+random.nextInt(bc-fc-16);
int g = fc+random.nextInt(bc-fc-14);
int b = fc+random.nextInt(bc-fc-18);
return new Color(r,g,b);
}
/**
* 生成随机图片
* @param request
* @param response
*/
public void getRandCode(HttpServletRequest request, HttpServletResponse response){
HttpSession session = request.getSession();
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
Graphics graphics = image.getGraphics();
graphics.fillRect(0,0,width,height);//图片大小
graphics.setFont(new Font("Times new Roman",Font.ROMAN_BASELINE,18));
graphics.setColor(getRandColor(110,133));
//绘制干扰线
for (int i = 0;i <= lineSize;i++){
drowLine(graphics);
}
//绘制随机字符
String randomString = "";
for (int i = 1;i <= stringNum;i++){
randomString = drowString(graphics,randomString,i);
}
System.out.println(randomString);
//将生成的随机字符串保存到session中
session.removeAttribute(RANDOMCODEKEY);
session.setAttribute(RANDOMCODEKEY,randomString);
graphics.dispose();
try {
ImageIO.write(image,"JPEG",response.getOutputStream());
} catch (Exception e){
e.printStackTrace();
}
}
/**
* 绘制字符串
* @param graphics
* @param randomString
* @param i
* @return
*/
private String drowString(Graphics graphics,String randomString,int i){
graphics.setFont(getFont());
graphics.setColor(new Color(random.nextInt(101),random.nextInt(111),random.nextInt(121)));
String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));
randomString += rand;
graphics.translate(random.nextInt(3),random.nextInt(3));
graphics.drawString(rand,13*i,16);
return randomString;
}
/**
* 绘制干扰线
* @param graphics
*/
private void drowLine(Graphics graphics){
int x = random.nextInt(width);
int y = random.nextInt(height);
int x1 = random.nextInt(13);
int y1 = random.nextInt(15);
graphics.drawLine(x,y,x1,y1);
}
/**
* 获取随机的字符
* @param num
* @return
*/
public String getRandomString(int num){
return String.valueOf(randString.charAt(num));
}
}
前台:
<div class="layui-input-inline">
<a href="javascript:void(0);" title="点击更换验证码">
<img id="imgVerify" src="../user/getVerify" alt="更换验证码" class="layui-input" onclick="getCode(this)" >
</a>
</div>
js:
最后后面接口后面跟一个随机数,具体为啥我也不知,反正不加,只能点一次,或者打开控制台进行点击换图片,反正加了不会错
function getCode(object) {
$("#imgVerify").removeAttr("src");
$("#imgVerify").attr("src","../user/getVerify?"+Math.random());
}