描述： jquery.qrcode.js 是一個能夠在客戶端生成矩陣二維碼QRCode 的jquery插件 ，使用它可以很方便的在頁面上生成二維條碼。此插件是能夠獨立使用的，體積也比較 小，使用gzip壓縮后才不到4kb。因為它是直接在客戶端生成的條碼， 所以不會有圖片下載的過程，能夠實現快速生成。它是基於一個多語言的類庫封裝的，也不依賴於其他額外的服務。
好處：使用jquery-qrcode的好處，不需要在服務器端生成多余的二維碼圖片，二維碼直接通過JavaScript直接在客戶端生成，有效減少帶寬，以及維護成本。
首先大家可以看一下jquery.qrcode.js官網，官網上也有例子。但是官網的 jquery.qrcode.js是不支持中文的，廢話不多說了，現在我們開始吧。
官網上的 qrcode.js 文件里沒有實現中文的支持和LOGO的添加，現在我們將這個文件修改為jquery.qrcode.js文件了。此外還需要一個對中文進行轉碼的文件，該文件為 utf.js。然后在 jquery.qrcode.js 文件中調用了 utf.js 文件的 utf16to8(str) 方法對其中文進行了轉碼。
下面是我寫的一個示例，該示例需要的js文件有 jquery.qrcode.js 和 utf.js 以及 jquery-1.8.0.js 。還有一個 LOGO圖片 可點擊下載文件。
調用的jsp代碼如下：
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>
運行結果：
下面是自己做的示例源碼 example.zip ，點擊可下載源碼。
版權聲明：本文為博主原創文章，未經博主允許不得轉載。