圖片驗證碼demo示例

1.首先我們需要一個生成圖片驗證碼圖片的一個工具類（下方會有代碼示例）

代碼如下：

　　　　

package com.util;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;

public class ImgUtil {

    private int w = 70;
    private int h = 35;
     private Random r = new Random();
     // {"宋體", "華文楷體", "黑體", "華文新魏", "華文隸書", "微軟雅黑", "楷體_GB2312"}
    private String[] fontNames  = {"宋體", "華文楷體", "黑體", "微軟雅黑", "楷體_GB2312"};
    // 可選字符
    private String codes  = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
    // 背景色
    private Color bgColor  = new Color(255, 255, 255);
    // 驗證碼上的文本
    private String text ;
    
    // 生成隨機的顏色
    private Color randomColor () {
        int red = r.nextInt(150);
        int green = r.nextInt(150);
        int blue = r.nextInt(150);
        return new Color(red, green, blue);
    }
    
    // 生成隨機的字體
    private Font randomFont () {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];//生成隨機的字體名稱
        int style = r.nextInt(4);//生成隨機的樣式, 0(無樣式), 1(粗體), 2(斜體), 3(粗體+斜體)
        int size = r.nextInt(5) + 24; //生成隨機字號, 24 ~ 28
        return new Font(fontName, style, size);
    }
    
    // 畫干擾線
    private void drawLine (BufferedImage image) {
        int num  = 3;//一共畫3條
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        for(int i = 0; i < num; i++) {//生成兩個點的坐標，即4個值
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h); 
            g2.setStroke(new BasicStroke(1.5F)); 
            g2.setColor(Color.BLUE); //干擾線是藍色
            g2.drawLine(x1, y1, x2, y2);//畫線
        }
    }
    
    // 隨機生成一個字符
    private char randomChar () {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }
    
    // 創建BufferedImage
    private BufferedImage createImage () {
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); 
        Graphics2D g2 = (Graphics2D)image.getGraphics(); 
        g2.setColor(this.bgColor);
        g2.fillRect(0, 0, w, h);
         return image;
    }
    
    // 調用這個方法得到驗證碼
    public BufferedImage getImage () {
        BufferedImage image = createImage();//創建圖片緩沖區 
        Graphics2D g2 = (Graphics2D)image.getGraphics();//得到繪制環境
        StringBuilder sb = new StringBuilder();//用來裝載生成的驗證碼文本
        // 向圖片中畫4個字符
        for(int i = 0; i < 4; i++)  {//循環四次，每次生成一個字符
            String s = randomChar() + "";//隨機生成一個字母 
            sb.append(s); //把字母添加到sb中
            float x = i * 1.0F * w / 4; //設置當前字符的x軸坐標
            g2.setFont(randomFont()); //設置隨機字體
            g2.setColor(randomColor()); //設置隨機顏色
            g2.drawString(s, x, h-5); //畫圖
        }
        this.text = sb.toString(); //把生成的字符串賦給了this.text
        drawLine(image); //添加干擾線
        return image;        
    }
    
    // 返回驗證碼圖片上的文本
    public String getText () {
        return text;
    }
    
    // 保存圖片到指定的輸出流
    public static void output (BufferedImage image, OutputStream out) 
                throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
    
}

 

2.第二步我們要生成一個圖片並把它寫回到頁面中去展示（代碼如下）

        <tr>
                <td>驗證碼：</td>
                <td>
                    <input type="text" id="yan" onblur="cha()"/>
                    <img src="<%=basePath%>img/getImg.action" id="im">
                    <a href="javascript:huan()">換一張</a>&nbsp;<span id="span1" style="color: red"></span>
                </td>
            </tr>



        function huan(){
            var  im=document.getElementById("im");
              im.src="<%=basePath%>img/getImg.action?qwer="+new Date().getTime();
        }
        function cha(){
            var yan=$("#yan").val();
            $.ajax({
                url:"${pageContext.request.contextPath }/img/findYan.action",
                type:"post",
                data:"yan="+yan,
                success:function(va){
                    $("#span1").html(va);
                }
            });
        }

 

頁面中調用了controller中的getImg的方法來獲取圖片

controller的代碼如下：

package com.controller;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.UnsupportedEncodingException;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.service.CountryService;
import com.util.ImgUtil;

@Controller
@RequestMapping("img")
public class ImgController {
    @Resource
    CountryService countryService;
    
    @RequestMapping("getImg")
    public void getImg(HttpServletRequest request,HttpServletResponse response){
        ImgUtil imgUtil=new ImgUtil();
        BufferedImage image = imgUtil.getImage();
        String text = imgUtil.getText();
        request.getSession().setAttribute("text", text);
        try {
            imgUtil.output(image, response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    @RequestMapping("findYan")
    public void findYan(HttpServletRequest request,HttpServletResponse response,String yan){
        response.setContentType("text/html;charset=utf-8");
        if(yan==null){
            yan="";
        }
        String text = (String)request.getSession().getAttribute("text");
        String msg="";
        if(yan.equalsIgnoreCase(text)){
            msg="驗證碼正確";
        }else{
            msg="驗證碼錯誤";
        }
        try {
            response.getWriter().print(msg);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

 

contrller中有方法來判斷是否輸入的驗證碼與圖片中驗證碼一致的方法，還有換一張圖片的方法

 

以上為現成的代碼示例，直接拖拽來實現這個功能，幫助到的小朋友記得關注點個贊，下次還會有更多功能的詳細代碼示例！！！