Struts2显示图片验证码

时间:2022-12-30 18:33:08

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

Step 1.随机验证码

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

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

  SecurityCode类:

import java.util.Arrays;

 

public class SecurityCode {

 

   

    public enum SecurityCodeLevel {

       Simple, Medium, Hard

    };

 

   

    public static String getSecurityCode() {

       return getSecurityCode(4, SecurityCodeLevel.Medium, false);

    }

 

   

    public static String getSecurityCode(int length, SecurityCodeLevel level,

           boolean isCanRepeat) {

       // 随机抽取len个字符

       int len = length;

       // 字符集合(除去易混淆的数字0、数字1、字母l、字母o、字母O)

       char[] codes = { '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b',

              'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'p',

              'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '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' };

       // 根据不同的难度截取字符数组

       if (level == SecurityCodeLevel.Simple) {

           codes = Arrays.copyOfRange(codes, 0, 9);

       } else if (level == SecurityCodeLevel.Medium) {

           codes = Arrays.copyOfRange(codes, 0, 33);

       }

       // 字符集合长度

       int n = codes.length;

       // 抛出运行时异常

       if (len > n && isCanRepeat == false) {

          throw new RuntimeException(String.format("调用SecurityCode.getSecurityCode(%1$s,%2$s,%3$s)出现异常,当isCanRepeat%3$s时,传入参数%1$s不能大于%4$s", len, level, isCanRepeat, n));

       }

 

       // 存放抽取出来的字符

       char[] result = new char[len];

 

       // 判断能否出现重复的字符

       if (isCanRepeat) {

           for (int i = 0; i < result.length; i++) {

              // 索引 0 and n-1

              int r = (int) (Math.random() * n);

 

              // result中的第i个元素设置为codes[r]存放的数值

              result[i] = codes[r];

           }

       } else {

           for (int i = 0; i < result.length; i++) {

              // 索引 0 and n-1

              int r = (int) (Math.random() * n);

 

              // result中的第i个元素设置为codes[r]存放的数值

              result[i] = codes[r];

 

              // 必须确保不会再次抽取到那个字符,因为所有抽取的字符必须不相同。

              // 因此,这里用数组中的最后一个字符改写codes[r],并将n1

              codes[r] = codes[n - 1];

              n--;

           }

       }

       return String.valueOf(result);

    }

}

 

Step 2.图片

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

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

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

     SecurityImage类:

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.image.BufferedImage;

import java.io.ByteArrayInputStream;

import java.io.ByteArrayOutputStream;

import java.io.IOException;

import java.util.Random;

import com.sun.image.codec.jpeg.ImageFormatException;

import com.sun.image.codec.jpeg.JPEGCodec;

import com.sun.image.codec.jpeg.JPEGImageEncoder;

 

public class SecurityImage {

 

   

    public static BufferedImage createImage(String securityCode) {

 

       // 验证码长度

       int codeLength = securityCode.length();

       // 字体大小

       int fSize = 15;

       int fWidth = fSize + 1;

       // 图片宽度

       int width = codeLength * fWidth + 6;

       // 图片高度

       int height = fSize * 2 + 1;

 

       // 图片

       BufferedImage image = new BufferedImage(width, height,

              BufferedImage.TYPE_INT_RGB);

       Graphics g = image.createGraphics();

 

       // 设置背景色

       g.setColor(Color.WHITE);

       // 填充背景

       g.fillRect(0, 0, width, height);

 

       // 设置边框颜色

       g.setColor(Color.LIGHT_GRAY);

       // 边框字体样式

       g.setFont(new Font("Arial", Font.BOLD, height - 2));

       // 绘制边框

       g.drawRect(0, 0, width - 1, height - 1);

 

       // 绘制噪点

       Random rand = new Random();

       // 设置噪点颜色

       g.setColor(Color.LIGHT_GRAY);

       for (int i = 0; i < codeLength * 6; i++) {

           int x = rand.nextInt(width);

           int y = rand.nextInt(height);

           // 绘制1*1大小的矩形

           g.drawRect(x, y, 1, 1);

       }

 

       // 绘制验证码

       int codeY = height - 10;

       // 设置字体颜色和样式

       g.setColor(new Color(19, 148, 246));

       g.setFont(new Font("Georgia", Font.BOLD, fSize));

       for (int i = 0; i < codeLength; i++) {

           g.drawString(String.valueOf(securityCode.charAt(i)), i * 16 + 5,

                  codeY);

       }

       // 关闭资源

       g.dispose();

 

       return image;

    }

 

   

    public static ByteArrayInputStream getImageAsInputStream(String securityCode) {

 

       BufferedImage image = createImage(securityCode);

       return convertImageToStream(image);

    }

 

   

    private static ByteArrayInputStream convertImageToStream(BufferedImage image) {

 

       ByteArrayInputStream inputStream = null;

       ByteArrayOutputStream bos = new ByteArrayOutputStream();

       JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);

       try {

           jpeg.encode(image);

           byte[] bts = bos.toByteArray();

           inputStream = new ByteArrayInputStream(bts);

       } catch (ImageFormatException e) {

           e.printStackTrace();

       } catch (IOException e) {

           e.printStackTrace();

       }

       return inputStream;

    }

}

 

Step 3.验证码与Struts 2结合

  1)Action

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

      SecurityCodeImageAction类:

import java.io.ByteArrayInputStream;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

import com.struts2.utils.SecurityCode;

import com.struts2.utils.SecurityImage;

public class ValidCodeAction extends ActionSupport {

   

    private static final long serialVersionUID = 5633780176793520460L;

       //图片流

    private ByteArrayInputStream imageStream;

    @Override

    public String execute() throws Exception {

       // TODO Auto-generated method stub

       try {

           HttpServletRequest request = ServletActionContext.getRequest();

            String securityCode = SecurityCode.getSecurityCode();

            imageStream = SecurityImage.getImageAsInputStream(securityCode);

            //放入session

            //session.put("securityCode", securityCode);

            System.out.println("securityCode = " + securityCode);

            request.getSession().setAttribute("securityCode", securityCode);

       } catch (Exception e) {

           e.printStackTrace();

       }

       return SUCCESS;

    }

    public ByteArrayInputStream getImageStream() {

       return imageStream;

    }

    public void setImageStream(ByteArrayInputStream imageStream) {

       this.imageStream = imageStream;

    }

}

  2)Struts.xml

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

  同时这一项的值,应该与SecurityCodeImageAction中的图片流名称一致。

    Struts.xml:

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

 

  3)前台JSP

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

1 <</span>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.onload=function(){ 2 var verifyObj = document.getElementByIdx_x("Verify"); 3verifyObj.onclick=function(){ 4 this.src="SecurityCodeImageAction?timestamp="+newDate().getTime(); 5 }; 6 }

 

  5)效果

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

   

                图:验证码

 

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


自己总结:

关于验证码显示的原理:

一:验证码显示
1. 后台产生一个已经生成好的验证码图片使用BufferImage对象可以实现
     这一部分当产生验证码图片的时候就会将产生的随机数进行保存到Session中
2. 将产生的验证码图片对象进行返回,当然在返回的时候我们是通过Stream流的方式进行返回的
3. 页面使用image标签,指定src为返回验证码图片的的Action就行了
4. 点击刷新验证码,其实就是用请求的一遍返回验证码图片的Action,由于缓存的原因,要再请求的地址下进行加一个随机数,这样就会是进行新的请求了

二:验证码后台验证
1. 将用于输入的验证码,和Session中保存的验证码的随机数进行对比,即可判断验证码是否正确了