js生成二維碼中間有logo

時間 2019-11-19

原文原文鏈接

描述： jquery.qrcode.js 是一個可以在客戶端生成矩陣二維碼QRCode 的jquery插件，使用它能夠很方便的在頁面上生成二維條碼。此插件是可以獨立使用的，體積也比較小，使用gzip壓縮後纔不到4kb。由於它是直接在客戶端生成的條碼，因此不會有圖片下載的過程，可以實現快速生成。它是基於一個多語言的類庫封裝的，也不依賴於其餘額外的服務。javascript

好處：使用jquery-qrcode的好處，不須要在服務器端生成多餘的二維碼圖片，二維碼直接經過JavaScript直接在客戶端生成，有效減小帶寬，以及維護成本。html

首先你們能夠看一下jquery.qrcode.js官網，官網上也有例子。可是官網的 jquery.qrcode.js是不支持中文的，廢話很少說了，如今咱們開始吧。java

官網上的 qrcode.js 文件裏沒有實現中文的支持和LOGO的添加，如今咱們將這個文件修改成jquery.qrcode.js文件了。此外還須要一個對中文進行轉碼的文件，該文件爲 utf.js。而後在 jquery.qrcode.js 文件中調用了 utf.js 文件的 utf16to8(str) 方法對其中文進行了轉碼。jquery

下面是我寫的一個示例，該示例須要的js文件有 jquery.qrcode.js 和 utf.js 以及 jquery-1.8.0.js 。還有一個 LOGO圖片可點擊下載文件。git

調用的jsp代碼以下：github

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>該二維碼支持中文和LOGO</title>
 8 
 9 <script type="text/javascript" src="jquery-1.8.0.js"></script>
10 <script type="text/javascript" src="utf.js"></script>
11 <script type="text/javascript" src="jquery.qrcode.js"></script>
12 <script type="text/javascript">
13     $(document).ready(function() {
14         $("#qrcodeCanvas").qrcode({
15             render : "canvas",    //設置渲染方式，有table和canvas，使用canvas方式渲染性能相對來講比較好
16             text : "這是修改了官文的js文件，此時生成的二維碼支持中文和LOGO",    //掃描二維碼後顯示的內容,能夠直接填一個網址，掃描二維碼後自動跳向該連接
17             width : "200",               //二維碼的寬度
18             height : "200",              //二維碼的高度
19             background : "#ffffff",       //二維碼的後景色
20             foreground : "#000000",        //二維碼的前景色
21             src: 'photo.jpg'             //二維碼中間的圖片
22         });
23     });
24 </script>
25 
26 </head>
27 <body>
28     <center>
29       <h2>該二維碼支持中文和LOGO</h2>
30       <div id="qrcodeCanvas"></div>
31     </center>
32 </body>
33 </html>