首頁 >web前端 >js教程 >如何用jquery產生中間有logo的二維碼? (附代碼)

如何用jquery產生中間有logo的二維碼? (附代碼)

yulia
yulia原創
2018-09-13 16:34:012221瀏覽

 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn