1: JSP页面编写验证码输入框
<tr> <td class="field">验证码:</td> <td><input class="text verycode" type="text" name="veryCode" onfocus="FocusItem(this)" onblur="CheckItem(this);" /> <img src="index/captcha" id="captchaImage" title="图片看不清?点击重新得到验证码" /> <a id="captchaImage2" >换一张</a><span></span></td> </tr>
2: 通过js页面请求后台
$("#captchaImage,#captchaImage2").click(function(){ $("#captchaImage").attr("src", "index/captcha.form?time=" + (new Date()).valueOf()); }); <!--time表示时间戳,可以防止缓存,确保每次生成不同的验证码-->
3: 异步请求,在controller层的调用验证码工具类生成验证码(SpringMVC)
/* * 验证码请求 * */ @RequestMapping(value = "/captcha", method = RequestMethod.GET) @ResponseBody public void captcha(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ CaptchaUtil.outputCaptcha(request, response); }
4:编写工具类 CaptchaUtil (生成验证码的时候,放到session中,以便做表单验证时使用)
import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; /** * @ClassName: CaptchaUtil * @Description: 关于验证码的工具类 * @author 无名 * @date 2016-5-7 上午8:33:08 * @version 1.0 */ public class CaptchaUtil { /* * 无参构造方法 */ private CaptchaUtil(){} /* * 随机字符字典,除去 O,0,1,L这几个不好区分的字符 */ private static final char[] CHARS = { '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' }; /* * 随机数 */ private static Random random = new Random(); /* * 获取6位随机数 */ private static String getRandomString() { StringBuffer buffer = new StringBuffer(); for(int i = 0; i < 6; i++) { buffer.append(CHARS[random.nextInt(CHARS.length)]); } return buffer.toString(); } /* * 获取随机数颜色 */ private static Color getRandomColor() { return new Color(random.nextInt(255),random.nextInt(255), random.nextInt(255)); } /* * 返回某颜色的反色 */ private static Color getReverseColor(Color c) { return new Color(255 - c.getRed(), 255 - c.getGreen(), 255 - c.getBlue()); } public static void outputCaptcha(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("image/jpeg"); //生成并保存验证码到session,以便做表单请求验证的时候使用! String randomString = getRandomString(); request.getSession(true).setAttribute("randomString", randomString); int width = 100; int height = 30; Color color = getRandomColor(); Color reverse = getReverseColor(color); BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g = bi.createGraphics(); g.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 16)); g.setColor(color); g.fillRect(0, 0, width, height); g.setColor(reverse); g.drawString(randomString, 18, 20); for (int i = 0, n = random.nextInt(100); i < n; i++) { g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1); } // 转成JPEG格式 ServletOutputStream out = response.getOutputStream(); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out); encoder.encode(bi); out.flush(); } }