网页生成验证码技术

最新推荐文章于 2022-03-01 15:20:58 发布

高进123

最新推荐文章于 2022-03-01 15:20:58 发布

阅读量458

点赞数

分类专栏： JavaEE部分文章标签： servlet 验证码图片

本文链接：https://blog.youkuaiyun.com/lengjinghk/article/details/51941025

版权

JavaEE部分专栏收录该内容

30 篇文章

订阅专栏

后台servlet代码如下:

//告诉客户端此响应的格式
        response.setContentType("image/jpeg");

        int width = 80;
        int height = 40;
        //设置验证码图片的宽、高以及图片类型（这里是RGB类型）
        BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        //拿到一个Graphics对象
        Graphics g = img.getGraphics();
        //绘制背景
        g.setColor(Color.white);
        g.fillRect(0, 0, width, height);

        //设置字体
        g.setFont( new Font("黑体",Font.BOLD,18));
        //以毫秒时间为种子创建一个随机数生成器
        Random r = new Random(new Date().getTime());

        for(int i=0;i<4;i++){
            //生成随机数字0-9
            int a = r.nextInt(10);
            int y = 10+r.nextInt(20);
            //生成随机颜色
            Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
            g.setColor(c);
            //将数字画到图片中
            g.drawString(""+a, 5+i*width/4, y);
        }

        //绘制干扰线
//      for(int i=0;i<10;i++){
//          Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
//          g.setColor(c);
//          g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
//      }

        //绘制干扰点
        for(int i=0;i<100;i++){
            Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
            g.setColor(c);
            int x = r.nextInt(width);
            int y = r.nextInt(height);

            g.drawLine(x, y, x, y);
        }

        //类似于流中的close()带动flush()---把数据刷到img对象当中
        g.dispose();
        ImageIO.write(img, "jpeg", response.getOutputStream());

浏览器端代码如下:

<html>
  <head>
    <title>模拟登陆界面</title>
    <script type="text/javascript">
        function changeImg(){
            var imgNode = document.getElementById("imgId");
            var t = new Date().getTime();
            imgNode.src = "/JavaWeb/img?"+t;
        }
    </script>
  </head>
  <body>
    用户名:<input type="text" name="name"/><br/><br/>
    密    码:<input type="password" name="pwd"/><br/><br/>
    验证码:<input type="text" name="name"/>
         <img id="imgId" src="/JavaWeb/img"/>
         <a href="javascript:changeImg()">看不清</a><br/>
         <input type="submit" value="登录"/>
  </body>
</html>