Struts2 验证码图片实例

本文分三个步骤介绍验证码图片生成以及与Struts2结合使用。 

Step 1.随机验证码

　　一步一步来，要生成验证码图片，首先要有验证码，然后才能在画在图片上。为了能够灵活控制验证码，特别编写了SecurityCode类，它向外提供随机字符串。并且可以控制字符串的长度和难度。SecurityCode类中提供的验证码分三个难度，易（全数字）、中（数字+小写英文）、难（数字+大小写英文）。难度使用枚举SecurityCodeLevle表示，避免使用1、2、3这样没有明确意义的数字来区分。

　　同时，还控制了能否出现重复的字符。为了能够方便使用，方法设计为static。

　　SecurityCode类：

 1 import java.util.Arrays;
 2 
 3 /**
 4  * 工具类，生成随机验证码字符串
 5  * @version 1.0 2012/08/21
 6  * @author dongliyang
 7  *
 8  */
 9 public class SecurityCode {
10     
11     /**
12      * 验证码难度级别，Simple只包含数字，Medium包含数字和小写英文，Hard包含数字和大小写英文
13      */
14     public enum SecurityCodeLevel {Simple,Medium,Hard};
15     
16     /**
17      * 产生默认验证码，4位中等难度
18      * @return  String 验证码
19      */
20     public static String getSecurityCode(){
21         return getSecurityCode(4,SecurityCodeLevel.Medium,false);
22     }
23     
24     /**
25      * 产生长度和难度任意的验证码
26      * @param length  长度
27      * @param level   难度级别
28      * @param isCanRepeat  是否能够出现重复的字符，如果为true，则可能出现 5578这样包含两个5,如果为false，则不可能出现这种情况
29      * @return  String 验证码
30      */
31     public static String getSecurityCode(int length,SecurityCodeLevel level,boolean isCanRepeat){
32         
33         //随机抽取len个字符
34         int len=length;
35         
36         //字符集合(除去易混淆的数字0、数字1、字母l、字母o、字母O)
37         char[] codes={'1','2','3','4','5','6','7','8','9',
38                       'a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y','z',
39                       'A','B','C','D','E','F','G','H','I','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'};
40         
41         //根据不同的难度截取字符数组
42         if(level==SecurityCodeLevel.Simple){
43             codes=Arrays.copyOfRange(codes, 0,9);
44         }else if(level==SecurityCodeLevel.Medium){
45             codes=Arrays.copyOfRange(codes, 0,33);
46         }
47         
48         //字符集合长度
49         int n=codes.length;
50         
51         //抛出运行时异常
52         if(len>n&&isCanRepeat==false){
53             throw new RuntimeException(
54                     String.format("调用SecurityCode.getSecurityCode(%1$s,%2$s,%3$s)出现异常，当isCanRepeat为%3$s时，传入参数%1$s不能大于%4$s",
55                                    len,level,isCanRepeat,n));
56         }
57         
58         //存放抽取出来的字符
59         char[] result=new char[len];
60         
61         //判断能否出现重复的字符
62         if(isCanRepeat){
63             for(int i=0;i<result.length;i++){
64                 //索引 0 and n-1
65                 int r=(int)(Math.random()*n);
66             
67                 //将result中的第i个元素设置为codes[r]存放的数值
68                 result[i]=codes[r];
69             }
70         }else{
71             for(int i=0;i<result.length;i++){
72                 //索引 0 and n-1
73                 int r=(int)(Math.random()*n);
74                 
75                 //将result中的第i个元素设置为codes[r]存放的数值
76                 result[i]=codes[r];
77                 
78                 //必须确保不会再次抽取到那个字符，因为所有抽取的字符必须不相同。
79                 //因此，这里用数组中的最后一个字符改写codes[r]，并将n减1
80                 codes[r]=codes[n-1];
81                 n--;
82             }
83         }
84         
85         return String.valueOf(result);
86     }
87 }

 

Step 2.图片

     第一步已经完成，有了上面SecurityCode类提供的验证码，就应该考虑怎么在图片上写字符串了。在Java中操作图片，需要使用BufferedImage类，它代表内存中的图片。写字符串，就需要从图片BufferedImage上得到绘图图面Graphics，然后在图面上drawString。

     为了使验证码有一定的干扰性，也绘制了一些噪点。调用Graphics类的drawRect绘制1*1大小的方块就可以了。

     特别说明一下，由于后面要与Strtus2结合使用，而在Struts2中向前台返回图片数据使用的是数据流的形式。所以提供了从图片向流的转换方法convertImageToStream。

     SecurityImage类：

  1 import java.awt.Color;
  2 import java.awt.Font;
  3 import java.awt.Graphics;
  4 import java.awt.image.BufferedImage;
  5 import java.io.ByteArrayInputStream;
  6 import java.io.ByteArrayOutputStream;
  7 import java.io.IOException;
  8 import java.util.Random;
  9 import com.sun.image.codec.jpeg.ImageFormatException;
 10 import com.sun.image.codec.jpeg.JPEGCodec;
 11 import com.sun.image.codec.jpeg.JPEGImageEncoder;
 12 
 13 /**
 14  * 工具类，生成验证码图片
 15  * @version 1.0 2012/08/21
 16  * @author dongliyang
 17  *
 18  */
 19 public class SecurityImage {
 20     
 21     /**
 22      * 生成验证码图片
 23      * @param securityCode   验证码字符
 24      * @return  BufferedImage  图片
 25      */
 26     public static BufferedImage createImage(String securityCode){
 27         
 28         //验证码长度
 29         int codeLength=securityCode.length();
 30         //字体大小
 31         int fSize = 15;
 32         int fWidth = fSize + 1;
 33         //图片宽度
 34         int width = codeLength * fWidth + 6 ;
 35         //图片高度
 36         int height = fSize * 2 + 1;
 37         
 38         //图片
 39         BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
 40         Graphics g=image.createGraphics();
 41         
 42         //设置背景色
 43         g.setColor(Color.WHITE);
 44         //填充背景
 45         g.fillRect(0, 0, width, height);
 46         
 47         //设置边框颜色
 48         g.setColor(Color.LIGHT_GRAY);
 49         //边框字体样式
 50         g.setFont(new Font("Arial", Font.BOLD, height - 2));
 51         //绘制边框
 52         g.drawRect(0, 0, width - 1, height -1);
 53         
 54         
 55         //绘制噪点
 56         Random rand = new Random();
 57         //设置噪点颜色
 58         g.setColor(Color.LIGHT_GRAY);
 59         for(int i = 0;i < codeLength * 6;i++){
 60             int x = rand.nextInt(width);
 61             int y = rand.nextInt(height);
 62             //绘制1*1大小的矩形
 63             g.drawRect(x, y, 1, 1);
 64         }
 65         
 66         //绘制验证码
 67         int codeY = height - 10;  
 68         //设置字体颜色和样式
 69         g.setColor(new Color(19,148,246));
 70         g.setFont(new Font("Georgia", Font.BOLD, fSize));
 71         for(int i = 0; i < codeLength;i++){
 72             g.drawString(String.valueOf(securityCode.charAt(i)), i * 16 + 5, codeY);
 73         }
 74         //关闭资源
 75         g.dispose();
 76         
 77         return image;
 78     }
 79     
 80     /**
 81      * 返回验证码图片的流格式
 82      * @param securityCode  验证码
 83      * @return ByteArrayInputStream 图片流
 84      */
 85     public static ByteArrayInputStream getImageAsInputStream(String securityCode){
 86         
 87         BufferedImage image = createImage(securityCode);
 88         return convertImageToStream(image);
 89     }
 90     
 91     /**
 92      * 将BufferedImage转换成ByteArrayInputStream
 93      * @param image  图片
 94      * @return ByteArrayInputStream 流
 95      */
 96     private static ByteArrayInputStream convertImageToStream(BufferedImage image){
 97         
 98         ByteArrayInputStream inputStream = null;
 99         ByteArrayOutputStream bos = new ByteArrayOutputStream();
100         JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
101         try {
102             jpeg.encode(image);
103             byte[] bts = bos.toByteArray();
104             inputStream = new ByteArrayInputStream(bts);
105         } catch (ImageFormatException e) {
106             e.printStackTrace();
107         } catch (IOException e) {
108             e.printStackTrace();
109         }
110         return inputStream;
111     }
112 }

 

Step 3.验证码与Struts 2结合

　　1)Action

　　有了上面两步操作作为铺垫，含有验证码的图片就不成问题了，下面就可以使用Struts2的Action向前台返回图片数据了。

      SecurityCodeImageAction类：

/**
 * 提供图片验证码
 * @version 1.0 2012/08/22
 * @author dongliyang
 *
 */
public class SecurityCodeImageAction extends ActionSupport  implements SessionAware{
    //图片流
    private ByteArrayInputStream imageStream;
    //session域
    private Map<String, Object> session ;
    
    public ByteArrayInputStream getImageStream() {
        return imageStream;
    }

    public void setImageStream(ByteArrayInputStream imageStream) {
        this.imageStream = imageStream;
    }
    
    public void setSession(Map<String, Object> session) {
        this.session = session;
    }
    
    public String execute() throws Exception {
        //如果开启Hard模式，可以不区分大小写
//        String securityCode = SecurityCode.getSecurityCode(4,SecurityCodeLevel.Hard, false).toLowerCase();
        
        //获取默认难度和长度的验证码
        String securityCode = SecurityCode.getSecurityCode();
        imageStream = SecurityImage.getImageAsInputStream(securityCode);
        //放入session中
        session.put("securityCode", securityCode);
        return SUCCESS;
    }
}

　　2)Struts.xml

 　　在 Struts.xml配置文件中，需要配置SecurityCodeImageAction，由于现在返回的是流，就不应该再使用普通的方式了，应该在result上加上type="stream"。

  同时<param name="inputName">这一项的值，应该与SecurityCodeImageAction中的图片流名称一致。

    Struts.xml：

1         <action name="SecurityCodeImageAction" class="securityCodeImageAction">
2             <result name="success" type="stream">
3                 <param name="contentType">image/jpeg</param>
4                 <param name="inputName">imageStream</param>
5                 <param name="bufferSize">2048</param>
6             </result>
7         </action>

 

　　3)前台JSP

　　定义一个img元素，将src指向SecurityCodeImageAction就可以了，浏览器向Action发送请求，服务器将图片流返回，图片就能够显示了。

1 <img src="SecurityCodeImageAction" id="Verify"  style="cursor:hand;" alt="看不清，换一张"/>

　　4)JS

      验证码一般都有点击刷新的功能，这个也容易实现，点击图片，重新给图片的src赋值。但是这时，浏览器会有缓存问题，如果浏览器发现src中的url不变，就认为图片没有改变，就会使用缓存中的图片，而不是重新向服务器请求。解决办法是在url后面加上一个时间戳，每次点击时，时间戳都不一样，浏览器就认为是新的图片，然后就发送请求了。

     jQuery：

1 $(function () {  
2     //点击图片更换验证码
3     $("#Verify").click(function(){
4         $(this).attr("src","SecurityCodeImageAction?timestamp="+new Date().getTime());
5     });
6 });

   

      JavaScript: 

1 window.οnlοad=function(){
2     var verifyObj = document.getElementById("Verify");
3     verifyObj.οnclick=function(){
4         this.src="SecurityCodeImageAction?timestamp="+new Date().getTime();
5     };
6 }

 

　　5)效果

     生成的验证码图片如下所示，浅蓝色的字体，浅灰色的噪点。

   

                图：验证码

 

   结束： 经过上面的三个步骤，Struts2 结合验证码的例子就介绍完了。