Java实现可点击切换验证码

最新推荐文章于 2024-07-29 14:22:26 发布

石原里美的微笑

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量1.3k

点赞数 22

分类专栏： Java经典案例文章标签： java servlet 开发语言 intellij-idea eclipse

本文链接：https://blog.csdn.net/weixin_50635856/article/details/126919940

版权

Java经典案例专栏收录该内容

3 篇文章 7 订阅

订阅专栏

引言

大家九月好啊！这篇文章距离最后一篇文章已经相差了一个月了，虽然没有写文章，但是这一个月却并没有多么的轻松。在我发表Java基础的完结篇的时候，其实我已经学习完了Java基础，只是没有创作热情来推动着我将Java基础划上圆满的句号，不过最终还是把这篇文章给写出来了，但是通过阅读量能够看出来好像并没有很高的质量哈哈哈！在那期间我开始着手于学习Javaweb这部分，截止到现在我的进度已经有了一半，要问为什么一篇文章都没有发呢？我的回答是一方面是不知道该如何讲这一块知识，另一方面是这部分的知识有些碎，不知道大家哪些是理解的，哪些是不理解的，所以说很难下笔来写。再之后就是大三开学，需要将上学期的考试考了，因此就只能投身于复习考试了。而如今呢，伴随着考试和四六级的结束，我也彻底的释放了，可以重新转身投入到Java的知识海洋中了。

不过现在文章的更新只能跟着我现在的学习进度，毕竟时间还是很紧张的，如果后面我再次复习Javaweb的时候尽量把前面的知识给大家补齐，另外也可以直接私信我提问题的，我会尽我所能为大家解决问题的，感谢大家这么长时间喜欢我的文章，关注我！

下面来到今天的重点，为大家讲解一个简单的知识点，那就是题目所说的“Java实现可点击切换验证码”。

验证码雏形

首先呢，我们应该知道的是该验证码是在图片中进行的操作，因此我们需要调用image中的子类BufferedImage，而该子类的作用是将图片加载到内存中，其生成的图片在内存中有一个图像缓冲区，可以让我们对图片进行操作。
int width = 100;
int height = 50;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
在生成图像之后，就可以开始对其进行一系列的操作，使其更像是一个验证码。而这里要用到的则是Java类中的Graphics类，在此处我们就不对其概念过多的赘述了，能够看懂怎么用就好了，而想了解的同学可以进一步的了解其相关知识。
Graphics g = image.getGraphics();
//获取image中的Graphics
g.setColor(Color.pink);
//设置画笔的颜色
g.fillRect(0,0,width,height);
//颜色填充整个图像
//以该图像的原点为起始位置，填充宽为width、长为height大小
g.setColor(Color.black);
//重新设置画笔的颜色
g.drawRect(0,0,width-1,height-1);
//为图像画上相框，在此减一是因为刚好重合了
图像美化之后，就需要在其中添加验证码了而这个过程还是要用到Graphics中的方法
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZqwertyuiopasdfghjklzxcvbnm1234567890";
        Random r = new Random();
        for (int i = 1; i < 5; i++) {
            int index = r.nextInt(str.length());
            char ch = str.charAt(index);
            g.drawString(ch+"",width/5*i,height/2);
        }
        //实现验证码的随机生成
        g.setColor(Color.yellow);
        //重新设置画笔颜色
        for (int i = 0; i < 10; i++) {
            int x1 = r.nextInt(width);
            int x2 = r.nextInt(width);
            int y1 = r.nextInt(height);
            int y2 = r.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }
        //实现随机线条的生成
        ImageIO.write(image,"jpg",response.getOutputStream());
        //通过ImageIO实现图像的输出
然而这还是在Servlet中实现，具体操作时我们应该让它能够和前端相结合。

验证码1.0

前面我们的验证码还只是在Servlet中实现，接下来呢，我们可以尝试着使其于前端相结合起来。
<body>
<img id = "checkcode" src="/Test/checkCodeServlet">
<a id="change" href="">看不清换一张？</a>
</body>
定义img标签和a标签，并分别定义id属性，方便后续用来在JavaScript中获取它。
<script>
        window.onload=function (){
            var img = document.getElementById("checkcode");
            img.onclick=function (){
                var date = new Date().getTime();
                img.src = "/Test/checkCodeServlet?"+date;
            }
        }
</script>
为img标签设置点击事件，每次点击之后都会再次获取Servlet中的图像，从而实现，验证码的更新，然而由于浏览器中有缓存的缘故，在重新获取的时候，浏览器并不会再次获取，而是将原来的数据重新返回，因此需要对src的值需要不重复才可以，而时间戳刚好符合不重复，因为每次获取的时候都会重新获取时间。