效果图：
1、创建生成验证码图片的java类
1 package com.job.web.action.commons; 2 import java.awt.Color; 3 import java.awt.Font; 4 import java.awt.Graphics; 5 import java.awt.image.BufferedImage; 6 import java.io.IOException; 7 import java.io.OutputStream; 8 import java.util.Random; 9 10 import javax.imageio.ImageIO; 11 12 /** 13 * 生成验证码图片向前台返回 14 * @author Administrator 15 * 16 */ 17 public class MakeCertPic { 18 19 //验证码图片中可以出现的字符集 20 private char mapTable[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 21 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 22 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', 23 '9' }; 24 25 /** 26 * 生产彩色验证码图片 27 * @param width 生产图片宽度 28 * @param height 生产图片高度 29 * @param os 页面输出流 30 * @return 随机生产的验证码 31 */ 32 public String getCertPic(int width,int height,OutputStream os){ 33 //设定高度宽度默认值 34 if(width <= 0){ 35 width = 80; 36 } 37 if(height <= 0){ 38 height = 40; 39 } 40 //创建一个特定样式的BufferedImage 41 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); 42 //获取图形上下文 43 Graphics g = image.getGraphics(); 44 //设定背景色 45 g.setColor(new Color(0xDCDCDC)); 46 g.fillRect(0, 0, width, height); 47 //画边框 48 g.setColor(Color.getColor("#dddddd")); 49 g.drawRect(0, 0, width-1, height-1); 50 //取随机产生的认证码 51 String strEnsure = ""; 52 //4代表4位验证码，如果要生产更多位的认证码，则加大数值 53 for(int i = 0; i < 4; i++){ 54 strEnsure += mapTable[(int) (mapTable.length * Math.random())]; 55 } 56 //将验证码显示到图像中，如果要生产更多位的验证码，增加drawString语句 57 g.setColor(Color.BLUE); 58 g.setFont(new Font("Atlantic Inline", Font.PLAIN, 20)); 59 String str = strEnsure.substring(0, 1); 60 g.drawString(str, 8, 17); 61 str = strEnsure.substring(1, 2); 62 g.drawString(str, 20, 15); 63 str = strEnsure.substring(2, 3); 64 g.drawString(str, 35, 18); 65 str = strEnsure.substring(3, 4); 66 g.drawString(str, 45, 15); 67 //随机产生10个干扰点,产生多个修改数量10 68 Random rand = new Random(); 69 for (int i = 0; i < 10; i++) { 70 int x = rand.nextInt(width); 71 int y = rand.nextInt(height); 72 g.drawOval(x, y, 1, 1); 73 } 74 //释放图形上下文 75 g.dispose(); 76 try { 77 ImageIO.write(image, "JPEG", os); 78 } catch (IOException e) { 79 return ""; 80 } 81 return strEnsure; 82 } 83 }
2、创建获取后台生成的图片jsp,把验证码字符存入session
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <%@ page contentType="image/jpeg" %> 6 </head> 7 <body> 8 <jsp:useBean id="image" scope="page" class="com.job.web.action.commons.MakeCertPic"></jsp:useBean> 9 <% 10 String str = image.getCertPic(0,0,response.getOutputStream()); 11 // 将认证码存入session 12 session.setAttribute("picCode", str); 13 14 out.clear(); 15 out = pageContext.pushBody(); 16 %> 17 </body> 18 </html>
3、页面调用
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="s" uri="/struts-tags" %> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>测试图片验证码</title> 8 <script type="text/javascript" src="/touch/static/js/jquery-2.2.4.min.js"></script> 9 </head> 10 <body> 11 <script type="text/javascript"> 12 $(function(){ 13 changePic(); 14 }); 15 function changePic(){ 16 var verify = document.getElementById("pitureCode"); 17 verify.setAttribute('src','/commons/mobileMakeCertPic.jsp?it='+Math.random()); 18 } 19 20 </script> 21 <body> 22 23 <img src="" id="pitureCode" onclick="changePic();"/> 24 </body> 25 </html>
3、提交的时候，把用户输入的图片验证码 跟 session中存的验证码 做比较，判断用户是否输入正确