【javaweb】实现页面验证码及验证码点击切换

（一）验证码的实现

（1）在内存中创建图片

首先必须明确的是：要想操作一张图片，首先必须将其从磁盘加载到内存中，然后才能对图片做进一步的处理。 BufferedImage是Image的一个子类，Image和BufferedImage的主要作用就是将一副图片加载到内存中。 BufferedImage生成的图片在内存里有一个图像缓冲区，利用这个缓冲区我们可以很方便的操作这个图片，通常用来做图片修改操作如大小变换、图片变灰、设置图片透明或不透明等。

int width=100;
int height=50;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

（2）美化在内存中的图片

1. 填充背景色

Graphics graphics = image.getGraphics();//获得画笔对象
graphics.setColor(Color.PINK);//设置画笔颜色
graphics.fillRect(0,0,width,height);//填充粉色

2. 画图片边框

graphics.setColor(Color.blue);
graphics.drawRect(0,0,width-1,height-1);

3. 往图片中写入验证码

String str="ABCDEFGHIJKLNMOPQRSTUVWXYZabcdefghijklnmopqrstuvwxyz0123456789";
        Random ran=new Random();//生成随机角标
        for(int i=20;i<=80;i+=20) {
            int index = ran.nextInt(str.length());
            char c = str.charAt(index);//获取随机字符
            graphics.drawString(c+"", i, 25);
        }

4. 画图片干扰线

 graphics.setColor(Color.green);
        for (int i=0;i<10;i++) {
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);
            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            graphics.drawLine(x1, y1, x2, y2);//两点确定一条线
        }

（3）输出图片

用图片输出流将图片放入字节输出流当中，字节输出流再把图片输出到页面上

ImageIO.write(image,"jpg",response.getOutputStream());

（二）切换验证码

实现在注册表单中点击图片，切换验证码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <script type="text/javascript">
        function Change() {
            var img = document.getElementById("img")
            //设置时间戳
            var date = new Date().getTime();
            img.src="/CheckCodeServlet?"+date;
        }
    </script>
</head>
<body>
<img src="/CheckCodeServlet"  id="img" οnclick="Change();"/>
</body>
</html>

（三）遇到的问题

1.前端页面的JS中为什么要加时间戳？

如果不加时间戳，点击图片触发函数后，由于URL地址一致，虽然看似刷新了页面，但是浏览器会由于缓存的机制，导致图片还是原图，并未切换。而加上时间戳后，在URL地址栏上带上了随机参数，作用相当于欺骗浏览器跳转到一个新的地址，从而得到新的图片。

2.图片的id与点击事件绑定函数同名触发的问题

查阅文档发现，img在添加点击事件的时候，它的id和onclick的名称是不能相同的，同样name与事件名字也是不能相同的

（四）总结

实际开发中，我们通常不会自己手写验证码代码，一般是上网找到美观的验证码代码自己稍加修改就能加以运用，正所谓“面向百度编程”。

Mushroom-

发布了19 篇原创文章 · 获赞 51 · 访问量 2万+

私信关注