如何用jquery產生中間有logo的二維碼？（附代碼）-js教程-PHP中文網

如何用jquery產生中間有logo的二維碼？（附代碼）

yulia

發布： 2018-09-13 16:34:01

原創

2152 人瀏覽過

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程式碼如下：

  <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>该二维码支持中文和LOGO</title>
  
  <script type="text/javascript" src="jquery-1.8.0.js"></script>
 <script type="text/javascript" src="utf.js"></script>
 <script type="text/javascript" src="jquery.qrcode.js"></script>
 <script type="text/javascript">
     $(document).ready(function() {
         $("#qrcodeCanvas").qrcode({
             render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
             text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
             width : "200",               //二维码的宽度
             height : "200",              //二维码的高度
             background : "#ffffff",       //二维码的后景色
             foreground : "#000000",        //二维码的前景色
             src: &#39;photo.jpg&#39;             //二维码中间的图片
         });
     });
 </script>
 
 </head>
 <body>
     <center>
       <h2>该二维码支持中文和LOGO</h2>
       <div id="qrcodeCanvas"></div>
     </center>
 </body>
 </html>

登入後複製

以上是如何用jquery產生中間有logo的二維碼？（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！