JSP案例_简单实现验证码-蒲公英云

JSP案例_简单实现验证码

JSP案例_简单实现验证码

1.案例要求

（1）在一个JSP页面实现验证码，在另一个页面调用

（2）验证码为4位，实现字母数字全随机，颜色随机，旋转随机

（3）给验证码增加4条干扰线

2.案例分析

（1）主页面使用img标签的src属性引入验证页面的jsp文件

（2）主页面使用按钮的点击事件实现验证码的刷新和替换

（3）验证码的实现页面使用BufferedImage类的方法产生图片

（4）使用Graphics类的各种方法实现验证码的构成以及干扰线

（5）使用Graphics2D类实现旋转

3.代码实现

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form>
    姓    名：<input type="text" name="name" /><br />
    密    码：<input type="text" name="password" /><br />
    验证码：<input type="text" ><img src="yzm.jsp" id="img"/>
    <button type="button" id="btn">换一张</button><br />
    <button type="submit">提交</button>
</form>
<script>
    window.onload = function(){
        var img = document.getElementById("img");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            img.src="yzm.jsp?a="+new Date().getTime();
        }
    }
</script>

yzm.jsp:

<%@page import="java.awt.Graphics2D"%>
<%@page import="java.awt.Font"%>
<%@page import="java.awt.Color"%>
<%@page import="com.sun.image.codec.jpeg.JPEGCodec"%>
<%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.awt.Graphics"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    //强制让内置对象out失效，字符流和字节流不能同时使用
    out.clearBuffer();
    out = pageContext.pushBody();
    //构造图片
    BufferedImage bi = new BufferedImage(100,30,BufferedImage.TYPE_3BYTE_BGR);
    response.setHeader("content-type", "image/jpeg");
    Graphics g = bi.getGraphics();
    //填充背景
    g.setColor(new Color(15*16+2,15*16+2,15*16+2));
    g.fillRect(0, 0, bi.getWidth(), bi.getHeight());
    Graphics2D g2 = bi.createGraphics();
    //产生干扰线
    for(int i=1; i<=4; i++){
        int x1 = (int)(Math.random()*101);
        int y1 = (int)(Math.random()*31);
        int x2 = (int)(Math.random()*101);
        int y2 = (int)(Math.random()*31);
        int[] color = new int[3];
        for(int j=0;j<=2;j++){
            int intc = (int)(Math.random()*256);
            color[j] = intc;
        }
        g.setColor(new Color(color[0],color[1],color[2]));
        g.drawLine(x1, y1, x2, y2);        
    }
    //产生验证码
    String code = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    for(int i =1;i<=4;i++){
        int index = (int)(Math.random()*61);
        char c = code.charAt(index);
        int[] color = new int[3];
        for(int j=0;j<=2;j++){
            int intc = (int)(Math.random()*256);
            color[j] = intc;
        }
        g2.setColor(new Color(color[0],color[1],color[2]));
        //翻译坐标
        g2.translate(0,0);
        //产生随机角度
        int angle=0;
        angle = (int)(Math.random()*31);
        //旋转角度以及相对位置
        g2.rotate(angle*Math.PI/180,i*12, 10);
        g2.scale(1.2, 1.2);
        g2.drawString(c+"", i*10, 20);
        g2.rotate(-(angle*Math.PI/180),-i*6, -10);
    }
    // 把图片发送给客户端
    OutputStream os = response.getOutputStream();
    JPEGImageEncoder en =  JPEGCodec.createJPEGEncoder(os);
    en.encode(bi);
%>

4.运行截图

5.问题分析

（1）主页面引入验证码要用img标签，是一张图片，直接引入就是一个页面了

（2）按钮点击事件里不能把src属性的值写死，如果写死，浏览器一直使用缓存，验证码页面的图片就不会变，这里new了一个日期对象，不停获取当前面毫秒数，实现了验证码页面的动态刷新

（3）验证码页面引入IPEGCode类可能会提示找不到，因为这个类在jdk1.7以后运行环境中才有，之前的版本中没有该类，记得改变jdk版本

（4）注意各个随机数的范围，产生并加以使用，各种方法可以在API帮助文档搜索查看