关于验证码插件-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页面部分

           <form action="users/yanzhengma.do"" method="post">

                <input name="kaptcha" id="checkCode" class="form-control input-lg" type="text" maxlength="4" placeholder="请输入验证码" />

                <input type="submit" vlue="提交">

                <span class="fa fa-warning form-control-feedback"></span>

             </form>

html页面的js部分

    <script type="text/javascript">

        //点击图片更换验证码

        function changeimg(){

            var myimg = document.getElementById("randimg");

            now = new Date();

            myimg.src="rand.jsp?code="+now.getTime();

        }

    </script>

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

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";

    }