同步手绘板——二维码验证登录
通过手机扫描页面生成的二维码,实现两端的联通,在这里为什么不用传统的登录方式?在我们的设想里,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>