网页验证码的实现

登陆页面需要输入验证码

需要实现的效果：如果看不清，点击验证码图片进行更换。

首先需要页面需要有验证码放的地方。

<tr>    <th>        验证码:    </th>        <td>            <span class="fieldSet">                <input type="text" id="code" name="code" class="text captcha" maxlength="4"       autocomplete="off">                <img id="captchaImage" class="captchaImage" src="checkImg" onclick="this.src='checkImg?id='+Math.random()" title="点击更换验证码">            </span>        <s:fielderror></s:fielderror>        </td></tr>

这里需要注意的是，onclick方法是：checkImg?id=’+Math.random()’就是通过随机数从而实现每次的验证码都不相同。
checkImg只是Struts2.xml中一个action的名字，这个随意。
xml文件中是这样写的：

checkImgAction这个页面代码如下：

package mancs;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.util.Random;import javax.imageio.ImageIO;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;/** * 验证码Action类 *  * @author  *  */public class CheckImgAction extends ActionSupport {    @Override    public String execute() throws Exception {        int width = 120;        int height = 30;        // 步骤一 绘制一张内存中图片        BufferedImage bufferedImage = new BufferedImage(width, height,                BufferedImage.TYPE_INT_RGB);        // 步骤二 图片绘制背景颜色 ---通过绘图对象        Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔        // 绘制任何图形之前 都必须指定一个颜色        graphics.setColor(getRandColor(200, 250));        graphics.fillRect(0, 0, width, height);        // 步骤三 绘制边框        graphics.setColor(Color.WHITE);        graphics.drawRect(0, 0, width - 1, height - 1);        // 步骤四 四个随机数字        Graphics2D graphics2d = (Graphics2D) graphics;        // 设置输出字体        graphics2d.setFont(new Font("宋体", Font.BOLD, 18));        String words = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";        Random random = new Random();// 生成随机数        // 定义StringBuffer        StringBuffer sb = new StringBuffer();        // 定义x坐标        int x = 10;        for (int i = 0; i < 4; i++) {            // 随机颜色            graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random                    .nextInt(110), 20 + random.nextInt(110)));            // 旋转 -30 --- 30度            int jiaodu = random.nextInt(60) - 30;            // 换算弧度            double theta = jiaodu * Math.PI / 180;            // 生成一个随机数字            int index = random.nextInt(words.length()); // 生成随机数 0 到 length - 1            // 获得字母数字            char c = words.charAt(index);            sb.append(c);            // 将c 输出到图片            graphics2d.rotate(theta, x, 20);            graphics2d.drawString(String.valueOf(c), x, 20);            graphics2d.rotate(-theta, x, 20);            x += 30;        }        // 将生成的字母存入到session中        ServletActionContext.getRequest().getSession()                .setAttribute("checkcode", sb.toString());        // 步骤五 绘制干扰线        graphics.setColor(getRandColor(160, 200));        int x1;        int x2;        int y1;        int y2;        for (int i = 0; i < 30; i++) {            x1 = random.nextInt(width);            x2 = random.nextInt(12);            y1 = random.nextInt(height);            y2 = random.nextInt(12);            graphics.drawLine(x1, y1, x1 + x2, x2 + y2);        }        // 将上面图片输出到浏览器 ImageIO        graphics.dispose();// 释放资源        ImageIO.write(bufferedImage, "jpg", ServletActionContext.getResponse()                .getOutputStream());        return NONE;    }    /**     * 取其某一范围的color     *      * @param fc     *            int 范围参数1     * @param bc     *            int 范围参数2     * @return Color     */    private Color getRandColor(int fc, int bc) {        // 取其随机颜色        Random random = new Random();        if (fc > 255) {            fc = 255;        }        if (bc > 255) {            bc = 255;        }        int r = fc + random.nextInt(bc - fc);        int g = fc + random.nextInt(bc - fc);        int b = fc + random.nextInt(bc - fc);        return new Color(r, g, b);    }}