前言
登录页面图片验证码功能简单实现
Service层:
方法参数是为了存储code值🍁
/**
* 返回值为BufferedImage对象
* @param session 存储code值
* @return
*/
BufferedImage getImage(HttpSession session);
ServiceImpl层:
getImage(HttpSession session)方法 生成验证码图片🧅
/**
* 返回值为BufferedImage对象
* @param session 存储code值
* @return
*/
@Override
public BufferedImage getImage(HttpSession session) {
//创建空白图片
BufferedImage bufferedImage = new BufferedImage(70,40, BufferedImage.TYPE_INT_RGB);
//获取图片画笔
Graphics g = bufferedImage.getGraphics();
//绘制矩形边框 rectangle:矩形
g.drawRect(0,0,70,40);
//设置背景颜色
g.setColor(Color.cyan);
//填充背景色
g.fillRect(0,0,70,40);
Font font=new Font( "Agency FB",Font.BOLD,24);
//获取随机验证码
String ss="qwertyuiopasdfghjklzxcvbnm7894561230";
Random random = new Random();
StringBuilder sb = new StringBuilder();
for (int i=0;i<4;i++){
int index = random.nextInt(ss.length());
char c = ss.charAt(index);
sb.append(c);
//设置倾斜角度范围
int angle = random.nextInt(20);
//向左或者右倾斜
angle = (random.nextBoolean() == true) ? angle : -angle;
AffineTransform affineTransform = new AffineTransform();
affineTransform.rotate(Math.toRadians(angle), 0, 0);
font = font.deriveFont(affineTransform);
//设置画笔字体
g.setFont(font);
//设置字体颜色
g.setColor(Color.black);
//写入字体
int x=8+i*14;
int y=random.nextInt(6)+28;
g.drawString(""+c,x,y);
}
//存入session
String code=sb.toString();
session.setAttribute("code",code);
//设置干扰线
g.setColor(Color.pink);
for(int i = 0;i <12;i++)
{
int x1=random.nextInt(100);
int y1=random.nextInt(60);
int x2=random.nextInt(100);
int y2=random.nextInt(60);
g.drawLine(x1,y1,x2,y2);
}
//返回BufferedImage对象
return bufferedImage;
}
Controller层:
获取bufferedImage,打印验证码图片🎰
@GetMapping(value = "/image")
private void getImage(HttpServletResponse response,HttpSession session){
//设置图片类型
response.setContentType("image/png");
//调用业务层getImage方法,获取image
BufferedImage image = userService.getImage(session);
try {
//直接打印
ImageIO.write(image,"png",response.getOutputStream());
//打印到指定路径
// ImageIO.write(image,"png",new FileOutputStream(".\\src\\main\\resources\\static\\img\\verification.png"));
} catch (IOException e) {
e.printStackTrace();
}
}
前端页面:
点击验证码图片刷新。
获取DOM节点,设置src。(src后面加上随机不重复值,避免缓存,图片刷新无效)
//刷新验证码图片
getVerification(){
let verification=document.querySelector(".img");
verification.src="/User/image?"+`${new Date().getMilliseconds()}`;
}
验证码样式(可自调):