同步手绘板——二维码验证登录

通过手机扫描页面生成的二维码,实现两端的联通,在这里为什么不用传统的登录方式?在我们的设想里,PC端不需要过多的操作,更多的是实时显示,截取图片保存在本地,通过扫码只需确定连接关系即可。

二维码生成代码:

  1 package com.zh.ecard;
  2 
  3 import java.awt.Color;
  4 import java.awt.Graphics2D;
  5 import java.awt.image.BufferedImage;
  6 import java.io.File;
  7 import java.io.IOException;
  8 import java.io.PrintWriter;
  9 
 10 import javax.imageio.ImageIO;
 11 import javax.servlet.ServletException;
 12 import javax.servlet.http.HttpServlet;
 13 import javax.servlet.http.HttpServletRequest;
 14 import javax.servlet.http.HttpServletResponse;
 15 
 16 import com.swetake.util.Qrcode;
 17 
 18 public class EcardServlet extends HttpServlet {
 19 
 20     /**
 21      * The doGet method of the servlet. <br>
 22      *
 23      * This method is called when a form has its tag value method equals to get.
 24      * 
 25      * @param request the request send by the client to the server
 26      * @param response the response send by the server to the client
 27      * @throws ServletException if an error occurred
 28      * @throws IOException if an error occurred
 29      */
 30     public void doGet(HttpServletRequest request, HttpServletResponse response)
 31             throws ServletException, IOException {
 32         doPost(request, response);
 33     }
 34 
 35     /**
 36      * The doPost method of the servlet. <br>
 37      *
 38      * This method is called when a form has its tag value method equals to post.
 39      * 
 40      * @param request the request send by the client to the server
 41      * @param response the response send by the server to the client
 42      * @throws ServletException if an error occurred
 43      * @throws IOException if an error occurred
 44      */
 45     public void doPost(HttpServletRequest request, HttpServletResponse response)
 46             throws ServletException, IOException {
 47         //new一个qrcode的对象
 48         Qrcode qrcode = new Qrcode();
 49         //设置纠错级别
 50         qrcode.setQrcodeErrorCorrect('M');
 51         //设置二维码的编码模式
 52         qrcode.setQrcodeEncodeMode('B');
 53         //设置二维码版本号 1-40
 54         qrcode.setQrcodeVersion(15);
 55         
 56         String contents = "http://www.baidu.com";
 57         byte[] content = contents.getBytes();
 58         
 59         //设置画板的高宽
 60         int width = 255;
 61         //图片缓存区
 62         BufferedImage image = new BufferedImage(width, width, BufferedImage.TYPE_INT_RGB);
 63         //获取画笔
 64         Graphics2D gs = image.createGraphics();
 65         //设置背景颜色
 66         gs.setBackground(Color.WHITE);
 67         //设置画笔的颜色
 68         gs.setColor(Color.BLACK);
 69         //绘制图形
 70         gs.clearRect(0, 0, width, width);
 71         //计算绘制的二维码并设置其偏移量
 72         int a = 2;
 73         boolean[][] code = qrcode.calQrcode(content);
 74         for(int i = 0; i < code.length; i++){
 75             for(int j = 0; j < code.length; j++){
 76                 if(code[j][i]){
 77                     //绘制小方块
 78                     gs.fillRect(j * 3 + a, i * 3 + a, 3, 3);
 79                 }
 80             }        
 81         }
 82         //释放画笔
 83         gs.dispose();
 84         //清除图片缓存区
 85         image.flush();
 86         
 87         String aname = Math.random() + ".jpg";//隐式转换
 88         System.out.println(aname);
 89         
 90         //定义一个文件
 91         File file = new File(request.getServletContext().getRealPath("/images") + "/" + aname);
 92         
 93         //输出
 94         ImageIO.write(image, "JPEG", file);
 95         
 96         PrintWriter writer = response.getWriter();
 97         writer.println(aname);
 98         writer.flush();
 99         writer.close();
100     }
101 }

显示二维码:

<body>
    <div class="ecarBox">
        <h1>...........</h1>
        <p><span>地址:</span><input type="text" class="input_box" placeholder="请输入地址!"/></p>
        <input type="button" class="input_btn" value="二维码" />
    </div>
    <div class="ecardOuterBox">
        <div class="ecard">
            <img alt="二维码" src="images/248_1473125010.png" width="" height="">
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        $(".input_btn").click(function(){
            $.ajax({
                type:"post",
                url:"ecard",
                success:function(data){
                    $(".ecardOuterBox").append("<div class='ecard'>" + "<img alt='二维码' src='images/"+data+"' width='255' height='255' />" + "</div>");
                }
            });
        });
    </script>
  </body>

 

posted @ 2016-09-04 07:26  幸运女神在微笑·  阅读(339)  评论(0编辑  收藏  举报