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(); };