JSP实例：彩色验证码

浏览数：25 / 时间：2015年06月09日

本例使用一个JavaBean，名为Image.java，包com.zempty.bean下;

三个JSP文件，分别为image.jsp、login.jsp、check.jsp。其中login.jsp是登录页，image.jsp用来调用JavaBean显示图片，check.jsp用来检测输入的验证码是否正确。

Image.java代码如下：

package com.zempty.bean;

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

import javax.imageio.ImageIO;

public class Image {
    // 验证码图片中可以出现的字符集，可根据需要修改
    private char mapTable[] = { ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘, ‘g‘, ‘h‘, ‘i‘,
            ‘j‘, ‘k‘, ‘l‘, ‘m‘, ‘n‘, ‘o‘, ‘p‘, ‘q‘, ‘r‘, ‘s‘, ‘t‘, ‘u‘, ‘v‘,
            ‘w‘, ‘x‘, ‘y‘, ‘z‘, ‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘,
            ‘9‘ };

    /**
     * 功能：生成彩色验证码图片 参数width为生成图片的宽度，参数height为生成图片的高度，参数os为页面的输出流
     */
    public String getCertPic(int width, int height, OutputStream os) {
        if (width <= 0)
            width = 60;
        if (height <= 0)
            height = 20;
        BufferedImage image = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);
        // 获取图形上下文
        Graphics g = image.getGraphics();
        // 设定背景色
        g.setColor(new Color(0xDCDCDC));
        g.fillRect(0, 0, width, height);
        // 画边框
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, width - 1, height - 1);
        // 取随机产生的认证码
        String strEnsure = "";
        for (int i = 0; i < 4; ++i) {
            strEnsure += mapTable[(int) (mapTable.length * Math.random())];
        }
        // 将认证码显示到图像中，如果要生成更多位的验证码，增加drawString语句
        g.setColor(Color.BLACK);
        g.setFont(new Font("Atlantic Inline", Font.PLAIN, 18));
        String str = strEnsure.substring(0, 1);
        g.drawString(str, 8, 17);
        str = strEnsure.substring(1, 2);
        g.drawString(str, 20, 15);
        str = strEnsure.substring(2, 3);
        g.drawString(str, 35, 18);
        str = strEnsure.substring(3, 4);
        g.drawString(str, 45, 15);
        // 随机产生10个干扰点
        Random rand = new Random();
        for (int i = 0; i < 10; i++) {
            int x = rand.nextInt(width);
            int y = rand.nextInt(height);
            g.drawOval(x, y, 1, 1);
        }
        // 释放图形上下文
        g.dispose();
        try {
            // 输出图像到页面
            ImageIO.write(image, "JPEG", os);
        } catch (IOException e) {
            System.out.println(e.getMessage());
            return "";
        }
        return strEnsure;
    }
}

image.jsp代码如下：

<%--注意：contentType为image/jpeg--%>
<%@ page contentType="image/jpeg" pageEncoding="UTF-8"%>

<jsp:useBean id="image" class="com.zempty.bean.Image" scope="session" />
<%
    String str = image.getCertPic(0, 0, response.getOutputStream());
    //将验证码存入session
    session.setAttribute("certCode", str);
    out.clear();　　//这句和下面那句要加上，否则会出现getOutputStream() has already been called for this response的错误。
    out = pageContext.pushBody();
%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
</head>
<body>
    <form name="form1" action="check.jsp" method="post">
        用户名：<input type="text" name="username" /> <br /> 密&nbsp;&nbsp;码：<input
            type="password" name="password" /> <br /> 验证码：<input type="text"
            name="certCode" /><img src="image.jsp" /> <br /> <input
            type="submit" value="确定" />
    </form>
</body>
</html>

check.jsp代码如下：

<%@ page pageEncoding="UTF-8"%>

<%
    String certCode = request.getParameter("certCode");
    if (certCode.equals((String) session.getAttribute("certCode"))) {
        out.print("验证码输入正确！");
    } else {
        out.print("验证码输入错误！");
    }
%>

演示界面如下：

技术分享