註冊圖片驗證碼實現

註冊驗證碼實現:
1.在html頁面增長如下代碼
<img class="bod_1" id="validateCodeImg" alt="驗證碼" style="width:100px;height:40px"/>
    <div class="fs6"><div class="fs_5 udl col_1" id="validateCodeCk">驗證碼</div></div>

2.編寫JUser.js獲取方法,其中「APPAPI+"utils/validateCode」爲後臺方法:
var JUser={
refreshVerificationCode:function(showImgId){//刷新驗證碼      
    $(showImgId).attr("src",APPAPI+"utils/validateCode?u="+Math.random());
},

registerEmailInit:function(){//郵箱註冊初始化方法
   $(".register").register_email();
    JUser.refreshVerificationCode("#validateCodeImg");
      //綁定驗證碼刷新的事件
      $("#validateCodeCk").unbind("click").bind("click",function(){
             JUser.refreshVerificationCode("#validateCodeImg");
    });
}
}

3.control層utils/validateCode方法寫法:
    @RequestMapping(method = RequestMethod.GET, value = "validateCode")
    public ModelAndView getValidateCode(HttpServletRequest request,
            HttpServletResponse response) {
        try {
            // 設置響應的類型格式爲圖片格式
            response.setContentType("image/jpeg");
            // 禁止圖像緩存。
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            HttpSession session = request.getSession();

            ValidateCode vCode = new ValidateCode(120, 40, 5, 100);
            session.setAttribute("code", vCode.getCode());
            vCode.write(response.getOutputStream());
        } catch (Exception e) {
            return JsonView.addErrorToJson(BaseCode.ERROR_CODE107, response);
        }
        return null;
    }

4.驗證代碼:
比較客戶端傳過來的值,跟session中存儲的值是否一致
String code = CommonUtils.getString(request.getSession().getAttribute("code"), "");
                if (!CommonUtils.equalsCaseInsensitive(code, msgCode)) {
                    return JsonView.addErrorToJson(BaseCode.ERROR_CODE202,response);
                }



5.驗證圖片生成用到的工具類:

package com.taopl.test;

import java.io.ByteArrayInputStream;
import java.awt.*;

/**
 * ttf字體文件
 *
 * @author dsna
 *
 */
public class ImgFontByte {
    public Font getFont(int fontHeight) {
        try {
            Font baseFont = Font.createFont(Font.TRUETYPE_FONT,
                    new ByteArrayInputStream(hex2byte(getFontByteStr())));
            return baseFont.deriveFont(Font.PLAIN, fontHeight);
        } catch (Exception e) {
            return new Font("Arial", Font.PLAIN, fontHeight);
        }
    }

    private byte[] hex2byte(String str) {
        if (str == null)
            return null;
        str = str.trim();
        int len = str.length();
        if (len == 0 || len % 2 == 1)
            return null;

        byte[] b = new byte[len / 2];
        try {
            for (int i = 0; i < str.length(); i += 2) {
                b[i / 2] = (byte) Integer
                        .decode("0x" + str.substring(i, i + 2)).intValue();
            }
            return b;
        } catch (Exception e) {
            return null;
        }
    }

    /**
     * &nbsp; * ttf字體文件的十六進制字符串 &nbsp; * @return &nbsp;
     */
    private String getFontByteStr() {
        return null;
        // return str;//字符串太長 在附件中找
    }
}


package com.taopl.test;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;

/**
 * 驗證碼生成器
 *
 * @author dsna
 *
 */
public class ValidateCode {
    // 圖片的寬度。
    private int width = 160;
    // 圖片的高度。
    private int height = 40;
    // 驗證碼字符個數
    private int codeCount = 5;
    // 驗證碼干擾線數
    private int lineCount = 150;
    // 驗證碼
    private String code = null;
    // 驗證碼圖片Buffer
    private BufferedImage buffImg = null;

    private char[] codeSequence = { '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', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

    public ValidateCode() {
        this.createCode();
    }

    /**
     *
     * @param width
     *            圖片寬
     * @param height
     *            圖片高
     */
    public ValidateCode(int width, int height) {
        this.width = width;
        this.height = height;
        this.createCode();
    }

    /**
     *
     * @param width
     *            圖片寬
     * @param height
     *            圖片高
     * @param codeCount
     *            字符個數
     * @param lineCount
     *            干擾線條數
     */
    public ValidateCode(int width, int height, int codeCount, int lineCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.lineCount = lineCount;
        this.createCode();
    }

    public void createCode() {
        int x = 0, fontHeight = 0, codeY = 0;
        int red = 0, green = 0, blue = 0;

        x = width / (codeCount + 2);// 每一個字符的寬度
        fontHeight = height - 2;// 字體的高度
        codeY = height - 4;

        // 圖像buffer
        buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = buffImg.createGraphics();
        // 生成隨機數
        Random random = new Random();
        // 將圖像填充爲白色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);
        // 建立字體
        ImgFontByte imgFont = new ImgFontByte();
        Font font = imgFont.getFont(fontHeight);
        g.setFont(font);

        for (int i = 0; i < lineCount; i++) {
            int xs = random.nextInt(width);
            int ys = random.nextInt(height);
            int xe = xs + random.nextInt(width / 8);
            int ye = ys + random.nextInt(height / 8);
            red = random.nextInt(255);
            green = random.nextInt(255);
            blue = random.nextInt(255);
            g.setColor(new Color(red, green, blue));
            g.drawLine(xs, ys, xe, ye);
        }

        // randomCode記錄隨機產生的驗證碼
        StringBuffer randomCode = new StringBuffer();
        // 隨機產生codeCount個字符的驗證碼。
        for (int i = 0; i < codeCount; i++) {
            String strRand = String.valueOf(codeSequence[random
                    .nextInt(codeSequence.length)]);
            // 產生隨機的顏色值,讓輸出的每一個字符的顏色值都將不一樣。
            red = random.nextInt(255);
            green = random.nextInt(255);
            blue = random.nextInt(255);
            g.setColor(new Color(red, green, blue));
            g.drawString(strRand, (i + 1) * x, codeY);
            // 將產生的四個隨機數組合在一塊兒。
            randomCode.append(strRand);
        }
        // 將四位數字的驗證碼保存到Session中。
        code = randomCode.toString();
    }

    public void write(String path) throws IOException {
        OutputStream sos = new FileOutputStream(path);
        this.write(sos);
    }

    public void write(OutputStream sos) throws IOException {
        ImageIO.write(buffImg, "png", sos);
        sos.close();
    }

    public BufferedImage getBuffImg() {
        return buffImg;
    }

    public String getCode() {
        return code;
    }
}



html

相關文章
相關標籤/搜索