关于验证码插件-kaptcha不能在html中使用的解决办法

验证码插件在jsp页面中很好用，但是在html中使用却会报错。解决办法就是弃用，自己写个方法去实现生成验证码图片的功能。下面是代码

还是需要一个jsp，这个jsp代替后台控制器，详细代码。

//生成验证码功能的实现.

<%@page pageEncoding="UTF-8"  language="java" contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
        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);
        }
%>
<%
       // 设置页面不缓存
        response.setContentType("images/jpeg");

        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);

        // 在内存中创建图象
        int width = 105;

        // 在内存中创建图象
        int height = 46;
        BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);

        // 获取图形上下文
        Graphics2D  g = image.createGraphics();

        // 生成随机类
        Random random = new Random();

        // 设定背景色 -白色
        g.setColor(new Color(255,255,255));
        g.fillRect(0, 0, width, height);

        // 设定字体
        g.setFont(new Font("Times New Roman", Font.PLAIN, 38));

        // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
        g.setColor(getRandColor(160, 200));

        for (int i = 0; i < 4; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(30);
            int yl = random.nextInt(30);
            g.drawLine(x, y, x + xl, y + yl);
        }

        // 取随机产生的认证码(4位数字)
        String[] code = {
                "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "m",
                "n", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
                "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C",
                "D", "E", "F", "G", "H", "J", "K", "L", "N",  "P",
                "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
            };

        // 数组长度
        int length = code.length;

        String sRand = "";

        for (int i = 0; i < 4; i++) {
            // String rand=String.valueOf(random.nextInt(10)); //原来方法这个是产生数字的0-9
            // sRand+=rand;
            int start = random.nextInt(length);
            String rand = code[start];
            sRand += rand;

            // 将认证码显示到图象中 - 红色
            g.setColor(new Color(220,20,60)); // 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
            g.drawString(rand, (23 * i) + 6, 32);
        }

        // 将认证码存入SESSION
        session.setAttribute("key", sRand);

        // 图象生效
        g.dispose();

        // 输出图象到页面
        ImageIO.write(image, "JPEG", response.getOutputStream());
        //下边两行是防止抛出getOutputStream() has already been called for this response异常的
        out.clear();
        out = pageContext.pushBody();
%>

//生成验证码功能结束

接下来是html页面部分

          

                
                
                
             

html页面的js部分

   

到这生成验证码，和点击图片更换验证码的部分完成，下面是后台控制器对验证码的的校验。

public String yanzhengma() {

        //获得jsp控制器存入session的验证码字符串

        String kaptchaExpected = (String) request.getSession().getAttribute(
                "key");
     

           //获得html页面表单验证码的输入，可以将此处封装成参数（或者属性，如果是strus2的话）

        String kaptchaReceived = request.getParameter("kaptcha");
        System.out.println("kaptchaExpected=" + kaptchaExpected + " "
                + "kaptchaReceived=" + kaptchaReceived);
        if (kaptchaReceived == null
                || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)) {
            return "error";
        }
        return "ok";
    }