1. 程式人生 > >Java開發二維碼掃一掃名片技術

Java開發二維碼掃一掃名片技術

     二維碼,在現實生活中有很多的應用,在這裡,我們就是用jsp技術實現一個網頁端的二維碼生成產品,具體步驟如下:

一、準備工作

    2、簡化程式設計工具NetBeans

二、專案總體結構

  1、如下圖所示,為專案總體結構

在上圖中:

  Demo_11_QrcodeTest:為專案名

  Web.xml:為部分檔案的配置檔案

  images:用於儲存網頁實現過程中所需要的圖片

  upload:用於儲存生成的二維碼

  index.jsp:用於實現互動介面

  EncodingFilter類:用於過濾作用實現程式碼的統一,放置在使用的過程中亂碼

  Qrcode.jar:工具類,用於實現與包裝二維碼

2、實現效果圖:


如上圖所示,是實現的效果圖,能夠將輸入文字區域的內容轉化為右下角的二維碼,可通過掃面二維碼進行驗證

三、開始程式設計

  1、首先建立專案,開啟NetBeans,新建Java  Web專案,繼續新建new->index.jsp,新建檔案內容程式碼如下所示,其中CSS樣式表中使用類來實現效果,文字輸入區域使用textarea標籤來實現,最後使用form表單進行資料的提交,提交至CodeServlet類進行處理,說明過這些,我們將Qrcode.jar報匯入到專案中,如下圖所示,右鍵點選“庫->"新增JAR/資料夾”找到之前下載準備的包位置匯入即可:

下面就是前臺互動介面index.jsp的設計

<%-- 
    Document   : index
    Created on : 2016-7-5, 8:08:22
    Author     : Administrator
--%>
<%@page contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>QrcodeTest.jsp</title>
        <style type="text/css">
            *{padding:0px; margin:0px;}
            /*qrcode start*/
            .qrcode{width:600px;
                    height:300px;
                    margin:150px 0 0 150px;
                    text-align: center;
            }
            body{background: url("image/fengjiang.jpg") no-repeat; 
                 background-size: cover;}
            h1{font-size:28px;text-shadow:0 0 15px #ff0; font-family:"楷體";}
            .qrcode .q_text{
                width:90%;
                height:90%;
                padding: 15px;
                font-size: 20px;
                font-family:"楷體";
                margin: 5px 0;
                background:  beige;
                text-align: left;
            }
            .qrcode .q_btn{width: 90%;height:25px ;
                           border: 0px;outline: none;
                           background: violet;
                           cursor: pointer;
            }
            .qrcode .q_btn:hover{background: gray;color:  springgreen;
                                 transition: all .5s ease;border-radius: 10px}
            /*qrcode end*/   
            .imgBox{ width:200px;
                     height:200px;
                     margin:-100px 0 0 800px;
                     text-align: right;}
            </style>
        </head>
        <body>
            <form action="CodeServlet" method="post">
                <div class="qrcode">
                <h1>Java 開發二維碼掃一掃名片技術</h1>
                <textarea class="q_text" name="message"></textarea>
                <input type="submit" value="生成二維碼" class="q_btn"/>
            </div>
        </form>
        <div class="imgBox">
            <img src="upload/${path}" />
        </div>
    </body>
</html>

2、下面就是後臺處理CodeServlet類的實現方法,右鍵點選“源包->新建->Servlet”,出現如下圖所示結果

之後出現對話款進行輸入,如下圖所示:

其中CodeServlet類中程式碼如下所示:

package com.lutsoft.servlet;
import com.swetake.util.Qrcode;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CodeServlet extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        try (PrintWriter out = response.getWriter()) {
            //建立一個Qrcode
            Qrcode qrcode = new Qrcode();
            //設定二維碼的糾錯級別L(7%) M(15%) Q(25%) H(30%)
            qrcode.setQrcodeErrorCorrect('M');
            //設定二維碼的編碼模式Binary
            qrcode.setQrcodeEncodeMode('B');
            //設定二維碼的版本號1-40 ,1:21*21,2:25*25,...,40:177*177
            qrcode.setQrcodeVersion(7);

            //獲取圖片快取流物件
            int width = 140;
            int height = 140;
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

            //獲取畫筆
            Graphics2D gs = image.createGraphics();
            //設定畫筆的顏色
            gs.setColor(Color.black);
            //設定背景顏色為白色
            gs.setBackground(Color.white);
            //從0,0位置開始,高寬為height,width
            gs.clearRect(0, 0, width, height);

            //設定以下內容
            String content = request.getParameter("message");
            //獲取的內容變成位元組,並且防止亂碼
            System.out.println("content:" + content);
            byte[] contentBytes = content.getBytes("utf-8");

            //繪製二維碼
            int pix0ff = 2;
            boolean[][] code = qrcode.calQrcode(contentBytes);
            for (int i = 0; i < code.length; i++) {
                for (int j = 0; j < code.length; j++) {
                    if (code[i][j]) {
                        // gs.fill3DRect(j*3, i*3, 3, 3, true);
                        gs.fillRect(j * 3 + pix0ff, i * 3 + pix0ff, 3, 3);
                    }
                }
            }
            //生成二維碼圖片
            String pathName = new Date().getTime() + ".png";
            String realPath = request.getServletContext().getRealPath("/upload");
            FileOutputStream outputStream = new FileOutputStream(new File(realPath, pathName));
            ImageIO.write(image, "png", outputStream);
            request.setAttribute("path", pathName);
            request.getRequestDispatcher("index.jsp").forward(request, response);
            outputStream.close();
        }
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

在設定Servlet時當然需要設定web.xml,其中Web.xml檔案程式碼設定如下所示(即只需將以下內容複製到Web.xml中即可)

  <servlet>
        <servlet-name>CodeServlet</servlet-name>
        <servlet-class>com.lutsoft.servlet.CodeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CodeServlet</servlet-name>
        <url-pattern>/CodeServlet</url-pattern>
    </servlet-mapping>

3、至此,我們基本上完成了所需的工作,但是在掃描二維碼之後,我們會發現識別的漢字字元亂碼,所以我們在這裡新增過濾器EncodingFilter,進行對亂碼的處理,建立過程如下圖所示:

建立相應的過濾器,程式碼如下所示:

package com.lutsoft.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
public class EncodingFilter implements Filter
{
    public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException 
    {
        try 
        {
            request.setCharacterEncoding("utf-8");
            chain.doFilter(request, response);
        } catch (Throwable t) 
        {   
            t.printStackTrace();
        }
    }
    public void destroy(){  }
    public void init(FilterConfig filterConfig) {        } 
}

其中Web.xml中程式碼如下所示:  

 <filter>
        <filter-name>EncodingFilter</filter-name>
        <filter-class>com.lutsoft.filter.EncodingFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>EncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

至此,我們完成了對專案的建立工作,能夠實現對輸入文字資訊的轉化,具體的執行過程為選中index.jsp檔案右鍵進行執行,然後在出現的介面中輸入要轉換的內容,點選生成二維碼按鈕進行轉化為二維碼。