图片验证码
先写一个codeController
package com.ujy.emp.controller; import com.ujy.utils.ValidateCode; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @Controller @RequestMapping("/code") public class CodeController { @RequestMapping(value="getCode") public void getCode(@RequestParam(value = "time") String time, HttpServletRequest request, HttpServletResponse response) { ValidateCode code = new ValidateCode(60, 20, 4, 30, 25, "validateCode"); code.getCode(request, response); } }
在写一个验证码工具类
package com.ujy.utils; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; /** * 验证码工具类 */ public class ValidateCode { private int width = 90;//验证码宽度 默认值:90 private int height = 40;//验证码高度 默认值:40 private int codeCount = 4;//验证码个数 默认值:4 private int lineCount = 19;//混淆线个数 默认值:19 private int fontSize = 20;//字体大小像素 //存储session中的key值 默认值:"validateCode" private String sessionKey = "validateCode"; public ValidateCode() { } /** * @param width 验证码宽度 * @param height 验证码高度 * @param fontSize 字体大小像素 */ public ValidateCode(int width, int height, int fontSize) { this.width = width; this.height = height; this.fontSize = fontSize; } /** * @param width 验证码宽度 * @param height 验证码高度 * @param fontSize 字体大小像素 * @param sessionKey 存储session中的key值 */ public ValidateCode(int width, int height, int fontSize, String sessionKey) { this.width = width; this.height = height; this.fontSize = fontSize; this.sessionKey = sessionKey; } /** * @param width 验证码宽度 * @param height 验证码高度 * @param codeCount 验证码个数 * @param fontSize 字体大小像素 * @param sessionKey 存储session中的key值 */ public ValidateCode(int width, int height, int codeCount, int fontSize, String sessionKey) { this.width = width; this.height = height; this.codeCount = codeCount; this.fontSize = fontSize; this.sessionKey = sessionKey; } /** * @param width 验证码宽度 * @param height 验证码高度 * @param codeCount 验证码个数 * @param lineCount 混淆线个数 * @param fontSize 字体大小像素 * @param sessionKey 存储session中的key值 */ public ValidateCode(int width, int height, int codeCount, int lineCount, int fontSize, String sessionKey) { this.width = width; this.height = height; this.codeCount = codeCount; this.lineCount = lineCount; this.fontSize = fontSize; this.sessionKey = sessionKey; } char[] codeSequence = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'}; /** * 具体获取验证码的方法 * * @param time time为时戳,这样的话可以避免浏览器缓存验证码 * @throws IOException */ public void getCode(HttpServletRequest request, HttpServletResponse response) { //定义随机数类 Random r = new Random(); //定义存储验证码的类 StringBuilder builderCode = new StringBuilder(); //定义画布 BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); //得到画笔 Graphics g = buffImg.getGraphics(); //1.设置颜色,画边框 g.setColor(Color.gray); g.drawRect(0, 0, width, height); //2.设置颜色,填充内部 g.setColor(Color.white); g.fillRect(1, 1, width - 2, height - 2); //3.设置干扰线 // g.setColor(Color.gray); for (int i = 0; i < lineCount; i++) { int _R = (int) Math.floor(Math.random() * 256); int _G = (int) Math.floor(Math.random() * 256); int _B = (int) Math.floor(Math.random() * 256); g.setColor(new Color(_R, _G, _B, 255)); g.drawLine(r.nextInt(width), r.nextInt(width), r.nextInt(width), r.nextInt(width)); } //4.设置验证码 g.setColor(Color.blue); //4.1设置验证码字体 g.setFont(new Font("宋体", Font.BOLD | Font.ITALIC, fontSize)); for (int i = 0; i < codeCount; i++) { char c = codeSequence[r.nextInt(codeSequence.length)]; builderCode.append(c); g.drawString(c + "", ((width / codeCount) * i + 2), height * 4 / 5); } try { //5.输出到屏幕 ServletOutputStream sos = response.getOutputStream(); ImageIO.write(buffImg, "png", sos); //6.保存到session中 HttpSession session = request.getSession(); session.setAttribute("" + sessionKey + "", builderCode.toString()); //7.禁止图像缓存。 response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/png"); //8.关闭sos sos.close(); } catch (IOException e) { e.printStackTrace(); } } }
然后在工具类里面调用
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>欢迎登陆项目平台管理系统</TITLE> <META http-equiv=Content-Language content=zh-cn> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.2800.1611" name=GENERATOR> <LINK href="images/css1.css" type=text/css rel=stylesheet> <LINK href="images/newhead.css" type=text/css rel=stylesheet> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $("#validateCode").click(function(){ $("#validateCode").attr("src","${pageContext.request.contextPath}/code/getCode?time="+(new Date().getTime())); }); }); </script> </HEAD> <BODY bgColor=#eef8e0 leftMargin=0 topMargin=0 MARGINWIDTH="0" MARGINHEIGHT="0"> <form method="post" action="${pageContext.request.contextPath}/emp/login"> <DIV> <TABLE cellSpacing=0 cellPadding=0 width=1004 border=0 align="center"> <TBODY> <TR> <TD colSpan=6><IMG height=92 alt="" src="images/crm_1.gif" width=345></TD> <TD colSpan=4><IMG height=92 alt="" src="images/crm_2.gif" width=452></TD> <TD><IMG height=92 alt="" src="images/crm_3.gif" width=207></TD> </TR> <TR> <TD colSpan=6><IMG height=98 alt="" src="images/crm_4.gif" width=345></TD> <TD colSpan=4><IMG height=98 alt="" src="images/crm_5.gif" width=452></TD> <TD><IMG height=98 alt="" src="images/crm_6.gif" width=207></TD> </TR> <TR> <TD rowSpan=5><IMG height=370 alt="" src="images/crm_7.gif" width=59></TD> <TD colSpan=5><IMG height=80 alt="" src="images/crm_8.gif" width=286></TD> <TD colSpan=4><IMG height=80 alt="" src="images/crm_9.gif" width=452></TD> <TD><IMG height=80 alt="" src="images/crm_10.gif" width=207></TD> </TR> <TR> <TD><IMG height=110 alt="" src="images/crm_11.gif" width=127></TD> <TD background=images/crm_12.gif colSpan=6> <TABLE id=table1 cellSpacing=0 cellPadding=0 width="98%" border=0> <TBODY> <TR> <TD> <TABLE id=table2 cellSpacing=1 cellPadding=0 width="100%" border=0> <TBODY> <TR> <span style="color:red">${error}</span> <TD align=middle width=81><FONT color=#ffffff>用户名:</FONT></TD> <TD><INPUT class=regtxt title=请填写用户名 maxLength=16 size=16 value=username name=username></TD> </TR> <TR> <TD align=middle width=81><FONT color=#ffffff>密 码:</FONT></TD> <TD><INPUT class=regtxt title=请填写密码 type=password maxLength=16 size=16 name=password id=pass></TD> </TR> <TR> <TD align=middle width=81><FONT color=#ffffff >验证码:</FONT></TD> <TD><INPUT title=请填写验证码 maxLength=50 size=12 name=code value="${errorMsg}">
<span><img id="validateCode" src="${pageContext.request.contextPath}/code/getCode?time="+(new Date().getTime()) ></span></TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE> </TD> <TD colSpan=2 rowSpan=2><IMG height=158 alt="" src="images/crm_13.gif" width=295></TD> <TD rowSpan=2><IMG height=158 alt="" src="images/crm_14.gif" width=207></TD> </TR> <TR> <TD rowSpan=3><IMG height=180 alt="" src="images/crm_15.gif" width=127></TD> <TD rowSpan=3><IMG height=180 alt="" src="images/crm_16.gif" width=24></TD> <TD><input title=登录项目平台管理系统 type=image height=48 alt="" width=86 src="images/crm_17.gif" name="image" ></TD> <TD><IMG height=48 alt="" src="images/crm_18.gif" width=21></TD> <TD colSpan=2><A><IMG title=关闭页面 height=48 alt="" src="images/crm_19.gif" width=84 border=0></A></TD> <TD><IMG height=48 alt="" src="images/crm_20.gif" width=101></TD> </TR> <TR> <TD colSpan=5 rowSpan=2><IMG height=132 alt="" src="images/crm_21.gif" width=292></TD> <TD rowSpan=2><IMG height=132 alt="" src="images/crm_22.gif" width=170></TD> <TD colSpan=2><IMG height=75 alt="" src="images/crm_23.gif" width=332></TD> </TR> <TR> <TD colSpan=2><IMG height=57 alt="" src="images/crm_24.gif" width=332></TD> </TR> <TR> <TD><IMG height=1 alt="" src="images/spacer.gif" width=59></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=127></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=24></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=86></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=21></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=28></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=56></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=101></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=170></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=125></TD> <TD><IMG height=1 alt="" src="images/spacer.gif" width=207></TD> </TR> </TBODY> </TABLE> </DIV> </form> </BODY> </HTML>