1.情景展示
登录时，生成随机验证码图片，如何实现？
2.原因分析
后台生成验证码并生成图片返回至前台
3.解决方案
导包
import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletResponse; import org.apache.commons.lang.RandomStringUtils; import base.web.tools.WebUtils;
获取验证码请求处理
/**
* 获取验证码
* @explain
* @return 随机数图片
*/
public String getImage() {
try {
int width = 55;
int height = 25;
// 取得一个4位随机数字字符串
String s = RandomStringUtils.randomNumeric(4);
HttpServletResponse response = WebUtils.getResponse();
// 存入cookie，用于与用户的输入进行比较
Cookie cookie = new Cookie("validateCode", s);
response.addCookie(cookie);
response.setContentType("images/jpeg");
response.setHeader("Cache-Control", "no-cache");
ServletOutputStream out = response.getOutputStream();
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
// 设定背景色
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
// 设置字体
Font mFont = new Font("宋体", Font.BOLD, 18);
g.setFont(mFont);
// 画边框
// g.setColor(Color.BLACK);
// g.drawRect(0, 0, width - 1, height - 1);
// 生成随机类
Random random = new Random();
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
// 将验证码画进图片
g.drawString(s, 5, 20);
// 图象生效
g.dispose();
// 输出图象到页面
ImageIO.write((BufferedImage) image, "JPEG", out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 给定范围获得随机颜色
* @explain
* @param fc
* @param bc
* @return
*/
private Color getRandColor(int fc, int bc) {
Random random = new Random();
fc = (fc > 255) ? 255 : fc;
bc = (bc > 255) ? 255 : bc;
// 获取3次
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
html片段
<img src="<c:url value="/getImage.do"/>" id="randomImage" style="cursor: pointer;vertical-align: bottom" height="35px" width="100px" onclick='sjs()' />
js片段
function sjs () {
// 获取图片请求后面加一个随机参数，是为了避免同一个请求浏览器拒绝向服务器发送请求的问题（缓存）
$("#randomImage")[0].src = baseUrl + "/getImage.do?s=" + Math.random();
};