JavaWeb简易随机图片验证码
程序员文章站
2022-03-25 16:47:30
...
通过简单的Servlet和HTML实现简易随机图片验证码
效果图
可以根据需要再修改图片效果
代码
-
Servlet代码(该有的注释都有了)
package servlet.OutImage; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; @WebServlet("/responseDemo4") public class ResponseDemo4 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设定验证码图片宽高 int width = 100; int height = 50; //创建图片对象 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //获取图片画笔对象 Graphics g = image.getGraphics(); //设置画笔颜色 g.setColor(Color.PINK); //填充图片背景(底色) g.fillRect(0,0,width,height); //画边框 画不画都无所谓 g.setColor(Color.RED); g.drawRect(0,0,width-1,height-1);//这里不减1的话 会画超出图片界限 //生成字符表 String str = "qwertyuiopasdfghjklzxcvbnm0123456789QWERTYUIOPASDFGHJKLMNBVCXZ"; Random random = new Random(); g.setColor(Color.BLACK); //设置字体 微软雅黑 加粗 大小20 注意图像的大小 Font font = new Font("微软雅黑",Font.BOLD,20); g.setFont(font); //循环次数代表有多少个字符 for (int i = 0; i < 4; i++) { //写字符到图片中 //x算式里的4表示循环次数 计算结果使字符居中于图像 //y随机实现浮动效果 g.drawString(String.valueOf(str.charAt(random.nextInt(str.length()))), (font.getSize()*i)+(width/(4*2)), font.getSize()+random.nextInt(height-font.getSize())); } //画干扰线 4个值表示两个点 两点确定一条直线 //这里可以让两个点的值相同 再设置颜色 可以生成噪点 而不是线 g.setColor(Color.BLUE); for (int i = 0; i < 15; i++) { int x1 = random.nextInt(width); int x2 = random.nextInt(width); int y1 = random.nextInt(height); int y2 = random.nextInt(height); g.drawLine(x1,y1,x2,y2); } //输出图片 ImageIO.write(image,"jpg",response.getOutputStream()); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } } -
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册验证码</title> <script> window.onload=function () { var image = document.getElementById('change'); image.onclick=function () { image.src = '/responseDemo4?'+ new Date().getTime() }; var a = document.getElementById('changelink'); a.onclick=function () { image.src = '/responseDemo4?'+ new Date().getTime() }; }; </script> </head> <body> <img id="change" src="/responseDemo4"/><br> <a id="changelink" href="#">看不清楚？换一张</a> </body> </html>
上一篇： php 利用cookie记录访问次数
下一篇： sql 过滤重复记录和查询重复记录