使用jquery.qrcode.js產生二維碼外掛程式_jquery

二維碼應用已經滲透到我們的生活工作當中，您只需要用手機對著二維碼“掃一掃”即可獲得所對應的資訊，方便我們瞭解商家、購物、觀影等等。本文將介紹一款基於jquery的二維碼產生外掛程式qrcode，在頁面中調用該外掛程式就能產生對應的二維碼。

1.qrcode其實是通過使用jQuery實現圖形渲染，畫圖，支援canvas（HTML5）和table兩種方式，

github源碼地址：https://github.com/jeromeetienne/jquery-qrcode

參數說明：

• render   : "canvas",//設定渲染方式   
• width       : 256,     //設定寬度   
• height      : 256,     //設定高度   
• typeNumber  : -1,      //計算模式   
• correctLevel    : QRErrorCorrectLevel.H,//錯誤修正等級   
• background      : "#ffffff",//背景顏色   
• foreground      : "#000000" //前景顏色   

2.使用執行個體：

外掛程式引用:

<script src="../Js/jquery-1.11.3.min.js"></script>  <script src="../Js/jquery-qrcode-master/jquery.qrcode.min.js"></script> 

簡單一實例1：

<div id="code"></div> <script>  //任一字元串 產生二維碼  //預設使用Canvas畫圖  $('#code').qrcode('http://blog.csdn.net/u011127019'); </script> 

簡單一實例2：

<div id="code"></div> <script>  //table 模式相容 IE低版本  $('#code').qrcode({   render: 'table',   width: 100,   height: 100,   text: 'http://blog.csdn.net/u011127019'  }); </script> 

簡單一實例3（中文支援）：

我們實驗的時候發現不能識別中文內容的二維碼，通過尋找多方資料瞭解到，jquery-qrcode是採用charCodeAt()方式進行編碼轉換的。而這個方法預設會擷取它的Unicode編碼，如果有中文內容，在產生二維碼前就要把字串轉換成UTF-8，然後再產生二維碼。

<div id="code"></div> <script>  //如果內容中有中文，在產生二維碼錢就要把字串轉換成utf-8  function toUtf8(str) {   var out, i, len, c;   out = "";   len = str.length;   for (i = 0; i < len; i++) {    c = str.charCodeAt(i);    if ((c >= 0x0001) && (c <= 0x007F)) {     out += str.charAt(i);    } else if (c > 0x07FF) {     out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));     out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));    } else {     out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));    }   }   return out;  }   $('#code').qrcode({   text: toUtf8('我是tianma'),   width: 150,   height: 150  });   //就目前 微信/支付寶等 不識別其他顏色的二維碼  $('#code').qrcode({   text: toUtf8('我是tianma'),   width: 150,   height: 150,   background: '#f00',   foreground: '#0f0'  }); </script> 

執行個體4：

//text 屬性的值長度不能太長，最大位元組數 10208 //text 字串太長 微信/支付寶等掃一掃無法識別，微博識別內容更多 //微博掃一掃：大約200 字以內，微信掃一掃：大約 160字以內，支付寶掃一掃：大約130字元以內 $('#code').qrcode({  text: toUtf8('SignalR 是 ASP.NET 團隊正在開發的一個 Microsoft .NET Framework 庫和 jQuery 外掛程式，可能包括在以後版本的 ASP.NET 平台中。 它提供了一些前景極為光明的功能，而這些功能正是，並且是越來越多的，當前不曾具有的，'),  width: 150,  height: 150 }); 

希望本文所述對你有所協助，使用jquery.qrcode.js產生二維碼外掛程式內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!