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檔案右鍵進行執行,然後在出現的介面中輸入要轉換的內容,點選生成二維碼按鈕進行轉化為二維碼。