图片验证码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中有方法来判断是否输入的验证码与图片中验证码一致的方法，还有换一张图片的方法

 

以上为现成的代码示例，直接拖拽来实现这个功能，帮助到的小朋友记得关注点个赞，下次还会有更多功能的详细代码示例！！！