最近公司做项目开发中用到了验证码实现功能,将实现代码分享出来,
前段页面实现代码:
<ul> <li><label>验证码:</label></li> <li> <div> <input type="text" name="validateCode" class="login_input" value=""/> <img id="img" src="${baseURL }/validateCode" onclick="onclickValidateCode(this);" /> </div> </li> </ul>
为了表达清晰,样式部分代码去掉了,大家根据自己的需求,自己添加样式。
页面JS代码:触发变动验证码改变的JS
<script type="text/javascript" language="javascript"> //请求获取验证码 function onclickValidateCode(obj){ $(obj).attr("src","${baseURL }/validateCode?"+new Date().getTime()); } </script>
后台 Controller处理:
package com.njcc.pay.controller.login; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.lang3.math.NumberUtils; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import com.alibaba.dubbo.common.utils.StringUtils; /** * 验证马 Controller * * @author Administrator * */ @Controller public class ValidateCodeController { @SuppressWarnings("unused") private static final Log LOG = LogFactory.getLog(ValidateCodeController.class); public static final String VALIDATE_CODE = "validateCode"; private int w = 70; private int h = 23; /** * @throws Exception * 函数功能说明 : 进入后台登陆页面. * * @参数: @return * @return String * @throws */ @RequestMapping(value = "/validateCode") public void validateCode(HttpServletRequest request, HttpServletResponse response) throws Exception { createImage(request,response); } private void createImage(HttpServletRequest request,HttpServletResponse response) throws IOException { response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); String width = request.getParameter("width"); String height = request.getParameter("height"); if (StringUtils.isNumeric(width) && StringUtils.isNumeric(height)) { w = NumberUtils.toInt(width); h = NumberUtils.toInt(height); } BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); /* * 生成背景 */ createBackground(g); /* * 生成字符 */ String s = createCharacter(g); request.getSession().setAttribute(VALIDATE_CODE, s); g.dispose(); OutputStream out = response.getOutputStream(); ImageIO.write(image, "JPEG", out); out.close(); } /** * 生成颜色 * @param fc * @param bc * @return */ private Color getRandColor(int fc,int bc) { int f = fc; int b = bc; Random random=new Random(); if(f>255) { f=255; } if(b>255) { b=255; } return new Color(f+random.nextInt(b-f),f+random.nextInt(b-f),f+random.nextInt(b-f)); } /** * 生成背景 * @param g */ private void createBackground(Graphics g) { // 填充背景 g.setColor(getRandColor(220,250)); g.fillRect(0, 0, w, h); // 加入干扰线条 for (int i = 0; i < 8; i++) { g.setColor(getRandColor(40,150)); Random random = new Random(); int x = random.nextInt(w); int y = random.nextInt(h); int x1 = random.nextInt(w); int y1 = random.nextInt(h); g.drawLine(x, y, x1, y1); } } /** * 生成字符 * @param g * @return */ private String createCharacter(Graphics g) { char[] codeSeq = {‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘J‘, ‘K‘, ‘M‘, ‘N‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘ }; String[] fontTypes = {"Arial","Arial Black","AvantGarde Bk BT","Calibri"}; Random random = new Random(); StringBuilder s = new StringBuilder(); for (int i = 0; i < 4; i++) { String r = String.valueOf(codeSeq[random.nextInt(codeSeq.length)]);//random.nextInt(10)); g.setColor(new Color(50 + random.nextInt(100), 50 + random.nextInt(100), 50 + random.nextInt(100))); g.setFont(new Font(fontTypes[random.nextInt(fontTypes.length)],Font.BOLD,26)); g.drawString(r, 15 * i + 5, 19 + random.nextInt(8)); // g.drawString(r, i*w/4, h-5); s.append(r); } return s.toString(); } }
时间: 2024-10-13 23:48:42