java后端代码(这里使用了springMVC)
在绘制图片中的验证我们可以存储一份到到redis中,当前端提交验证时,我们在从redis中将验证码拿出来比较即可
@RequestMapping("/code")
public void getCode(HttpServletResponse response) throws Exception {
Random random = new Random();
//定义验证码中的字母后数字从这里面取
String val = "1234567890ZXCVBNMLKJHGFDSAQWERTYUIOPpoiuytrewqasdfghjklmnbvcxz";
//创建一张图片(黑纸)设置长,宽,以及颜色类型为RGB
BufferedImage image = new BufferedImage(120, 40, BufferedImage.TYPE_INT_RGB);
//设置颜色
int[] color = {0xFF34B3, 0x8A2BE2, 0x1b1256, 0x10d0d07, 0x006400, 0xA52A2A, 0x8B008B};
//绘制一个矩形
Graphics graphics = image.getGraphics();
//设置矩形的颜色
graphics.setColor(Color.green);
//设置矩形的大小前面两个数表示坐标0,0表示起点为页面的左上角,后面两个数表示长和高
graphics.fillRect(0, 0, 120, 40);
for (int i = 0; i < 5; i++) {
//从数组中取出验证码
String v = val.charAt(random.nextInt(val.length())) + "";
//从自定义的颜色中使用随机数取出颜色
graphics.setColor(new Color(color[random.nextInt(color.length)]));
//定义字体颜色和字体大小
graphics.setFont(new Font("", Font.BOLD, 28));
//向绘制的矩形框中写入,设置写入的位置
graphics.drawString(v, 10 + i * 20, 30);
}
//保存成图片(文件)
/*OutputStream out = new FileOutputStream("E:\\natapp\\code.jpg");
保存文件到本地
ImageIO.write(image, "jpg",out);*/
//向外输出图形
ImageIO.write(image, "jpg", response.getOutputStream());
}
前端代码
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="/code" onclick="imgChange(this)">
<script>
//设置点击事件
function imgChange(obj) {
//因为页面有缓存,所以要加上一个改变的数来保证每次都会向后台发送请求,这里我使用了获取当前时间
obj.src="/code?"+new Date();
}
</script>
</body>
</html>