Step 1.随机验证码
一步一步来,要生成验证码图片,首先要有验证码,然后才能在画在图片上。为了能够灵活控制验证码,特别编写了SecurityCode类,它向外提供随机字符串。并且可以控制字符串的长度和难度。SecurityCode类中提供的验证码分三个难度,易(全数字)、中(数字+小写英文)、难(数字+大小写英文)。难度使用枚举SecurityCodeLevle表示,避免使用1、2、3这样没有明确意义的数字来区分。同时,还控制了能否出现重复的字符。为了能够方便使用,方法设计为static。
SecurityCode类:
- package com.syz.onego.action.util;
- import java.util.Arrays;
- /**
- * 工具类,生成随机验证码字符串
- * @version 1.0 2012/12/01
- * @author shiyz
- *
- */
- public class SecurityCode {
- /**
- * 验证码难度级别,Simple只包含数字,Medium包含数字和小写英文,Hard包含数字和大小写英文
- */
- public enum SecurityCodeLevel {Simple,Medium,Hard};
- /**
- * 产生默认验证码,4位中等难度
- * @return String 验证码
- */
- public static String getSecurityCode(){
- return getSecurityCode(4,SecurityCodeLevel.Medium,false);
- }
- /**
- * 产生长度和难度任意的验证码
- * @param length 长度
- * @param level 难度级别
- * @param isCanRepeat 是否能够出现重复的字符,如果为true,则可能出现 5578这样包含两个5,如果为false,则不可能出现这种情况
- * @return String 验证码
- */
- 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],并将n减1
- 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类:
- package com.syz.onego.action.util;
- 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;
- /**
- * 验证码生成器类,可生成数字、大写、小写字母及三者混合类型的验证码。
- * 支持自定义验证码字符数量;
- * 支持自定义验证码图片的大小;
- * 支持自定义需排除的特殊字符;
- * 支持自定义干扰线的数量;
- * 支持自定义验证码图文颜色
- * @author shiyz
- * @version 1.0
- */
- public class SecurityImage {
- /**
- * 生成验证码图片
- * @param securityCode 验证码字符
- * @return BufferedImage 图片
- */
- 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;
- }
- /**
- * 返回验证码图片的流格式
- * @param securityCode 验证码
- * @return ByteArrayInputStream 图片流
- */
- public static ByteArrayInputStream getImageAsInputStream(String securityCode){
- BufferedImage image = createImage(securityCode);
- return convertImageToStream(image);
- }
- /**
- * 将BufferedImage转换成ByteArrayInputStream
- * @param image 图片
- * @return ByteArrayInputStream 流
- */
- 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类:
- package com.syz.onego.action.front.user;
- import java.io.ByteArrayInputStream;
- import java.util.Map;
- import org.apache.struts2.convention.annotation.Action;
- import org.apache.struts2.convention.annotation.Result;
- import org.apache.struts2.convention.annotation.Results;
- import org.apache.struts2.interceptor.SessionAware;
- import com.opensymphony.xwork2.ActionSupport;
- import com.syz.onego.action.util.SecurityCode;
- import com.syz.onego.action.util.SecurityImage;
- @Results({@Result(name = "success", type = "stream", params = {
- "contentType", "image/jpeg",
- "inputName", "imageStream",
- "bufferSize",
- "4096" })})
- public class SecurityCodeImageAction extends ActionSupport implements SessionAware{
- private static final long serialVersionUID = 1496691731440581303L;
- //图片流
- 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;
- }
- @Action("imagecode")
- 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;
- }
- }
如果是配置文件的话:
在 Struts.xml配置文件中,需要配置SecurityCodeImageAction,由于现在返回的是流,就不应该再使用普通的方式了,应该在result上加上type="stream"。
同时<param name="inputName">这一项的值,应该与SecurityCodeImageAction中的图片流名称一致。
Struts.xml:
- <action name="SecurityCodeImageAction" class="securityCodeImageAction">
- <result name="success" type="stream">
- <param name="contentType">image/jpeg</param>
- <param name="inputName">imageStream</param>
- <param name="bufferSize">2048</param>
- </result>
- </action>
定义一个img元素,将src指向SecurityCodeImageAction就可以了,浏览器向Action发送请求,服务器将图片流返回,图片就能够显示了。
- <img src="${ctx}/front/user/imagecode.action" id="Verify" style="cursor:pointer;" alt="看不清,换一张"/>
4)JS
验证码一般都有点击刷新的功能,这个也容易实现,点击图片,重新给图片的src赋值。但是这时,浏览器会有缓存问题,如果浏览器发现src中的url不变,就认为图片没有改变,就会使用缓存中的图片,而不是重新向服务器请求。解决办法是在url后面加上一个时间戳,每次点击时,时间戳都不一样,浏览器就认为是新的图片,然后就发送请求了。
- $(function () {
- //点击图片更换验证码
- $("#Verify").click(function(){
- $(this).attr("src","${ctx}/front/user/imagecode.action?timestamp="+new Date().getTime());
- });
- });
5)效果
生成的验证码图片如下所示,浅蓝色的字体,浅灰色的噪点。