Spingmvc项目注册登录图片验证码(比较灵活的验证码)

最近项目中注册模块要加一个图片验证码功能。

写下来记录下。

1：首先用什么实现，我用的servlet。

后台java代码：RandomValidateCode 类 ，这个类是生成随即验证码和干扰线，可以做为一个自定义可修改的类，不需要大改动。

package dcms.ebridge.web.core.utils;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * @author YuGH
 * 自定义修改随机生成验证码
 */

public class RandomValidateCode {

    public static String validateCode = null;
    private Random random = new Random();
    private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//可以去掉 0 O 1 i 等不好分辨
    private int width = 80;// 图片宽
    private int height = 25;// 图片高
    private int lineSize = 40;// 干扰线数量
    private int stringNum = 4;// 随机产生字符数量

    /**
     * 字体
     * @return
     */
    private Font getFont() {
        return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
    }

    /**
     * 随机颜色
     * @param fc
     * @param bc
     * @return
     */
    private Color getRandColor(int fc, int bc) {
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc - 16);
        int g = fc + random.nextInt(bc - fc - 14);
        int b = fc + random.nextInt(bc - fc - 18);
        return new Color(r, g, b);
    }

    /**
     * 随机图片
     * @param request
     * @param response
     */
    public void getRandcode(HttpServletRequest request,    HttpServletResponse response) {
        HttpSession session = request.getSession();
        //session.setMaxInactiveInterval(3 * 60);//超时时间
        BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
        g.setColor(getRandColor(110, 133));
        // 干扰线
        for (int i = 0; i <= lineSize; i++) {
            drowLine(g);
        }
        // 随机字符
        String randomString = "";
        for (int i = 1; i <= stringNum; i++) {
            randomString = drowString(g, randomString, i);
        }
        session.setAttribute("randomCode", randomString);
        validateCode = randomString.toUpperCase();
        g.dispose();
        try {
            ImageIO.write(image, "JPEG", response.getOutputStream());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 字符串
     * @param g
     * @param randomString
     * @param i
     * @return
     */
    private String drowString(Graphics g, String randomString, int i) {
        g.setFont(getFont());
        g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
                .nextInt(121)));
        String rand = String.valueOf(getRandomString(random.nextInt(randString
                .length())));
        randomString += rand;
        g.translate(random.nextInt(3), random.nextInt(3));
        g.drawString(rand, 13 * i, 16);
        return randomString;
    }

    /**
     * 干扰线
     * @param g
     */
    private void drowLine(Graphics g) {
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int xl = random.nextInt(13);
        int yl = random.nextInt(15);
        g.drawLine(x, y, x + xl, y + yl);
    }

    /**
     * 获取随机字符
     * @param num
     * @return
     */
    public String getRandomString(int num) {
        return String.valueOf(randString.charAt(num));
    }
}

2：自定义类有了，下面就要用servlet来输出页面。

后台java代码：ImageServletValidateCode ，新建servlet，粘贴下面代码即可。

package dcms.ebridge.web.core.utils;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
 * @author YuGH
 * 验证码入口 , Servlet 类型
 */

public class ImageServletValidateCode extends HttpServlet {
    private static final long serialVersionUID = 1L;
    Log logger = LogFactory.getLog(ImageServletValidateCode.class);

    public ImageServletValidateCode() {
        super();
    }

    @Override
    public void destroy() {
        super.destroy();
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {  

        response.setContentType("image/jpeg");//输出图片
        response.setHeader("Pragma", "No-cache");//不缓存
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expire", 0);
        RandomValidateCode randomValidateCode = new RandomValidateCode();
        try {
            randomValidateCode.getRandcode(request, response);
            System.out.println(" -- > 验证码 :" +RandomValidateCode.validateCode);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }  

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }  

}

3：生成和输出有了，下面开始配置页面访问的配置。

在web.xml中把下面代码复制进去。注意servler-class 是对应自己项目的路径。

  <servlet>
    <servlet-name>ImageServletValidateCode</servlet-name>
    <servlet-class>dcms.ebridge.web.core.utils.ImageServletValidateCode</servlet-class>
    <load-on-startup>10</load-on-startup>
  </servlet>
    <servlet-mapping>
        <servlet-name>ImageServletValidateCode</servlet-name>
        <url-pattern>/ImageServletValidateCode</url-pattern>
    </servlet-mapping>

4：输出有了，下面可以在jsp添加随机图片的url了。

<td>
    <input style="width: 103px" id="validateCode" name="validateCode" type="text" maxlength="4" onfocus="showRemark('validateCode')" onblur="hideRemark('validateCode')"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<img title="点击更换验证码!" id="Scode" style="cursor: pointer;" onclick="javascript:refresh(this);" src="${ctx }/ImageServletValidateCode">
    </td>  

5：图片里有个事件，是随机生成图片后缀，防止冲突。

　　　　　 //防止图片缓存
         function refresh(checkId) {
             checkId.src = "${ctx }/ImageServletValidateCode?"+Math.random();
         }  

　　到这一个验证码功能就完成了。