使用jquery.qrcode.js產生二維碼插件

二維碼應用程式已經滲透到我們的生活工作當中，您只需要用手機對著二維碼「掃一掃」即可獲得所對應的信息，方便我們了解商家、購物、觀影等等。本文將介紹一款基於jquery的二維碼產生插件qrcode，在頁面中呼叫該插件就能產生對應的二維碼。

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

github源碼位址：https://github.com/jeromeetienne/jquery-qrcode
參數說明：

render   : "canvas",//設定渲染方式   

width       : 256,     //設定寬度設定高度   

typeNumber  : -1,      //計算模式   

correctLevel    : QRErrorCorrectLevel.H,//錯誤校正等級   

background      : "#ffffff",//背景顏色   030🠎🠎🠎＠🠎🠎＠🠎🠎＠🠎🠎＠🠎＠🠎🠎＠🠎＠🠎＠🠎

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画图
 $(&#39;#code&#39;).qrcode(&#39;http://blog.csdn.net/u011127019&#39;);
</script>

   

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

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

   

實例4：

<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;
 }
  
 $(&#39;#code&#39;).qrcode({
  text: toUtf8(&#39;我是tianma&#39;),
  width: 150,
  height: 150
 });
  
 //就目前 微信/支付宝等 不识别其他颜色的二维码
 $(&#39;#code&#39;).qrcode({
  text: toUtf8(&#39;我是tianma&#39;),
  width: 150,
  height: 150,
  background: &#39;#f00&#39;,
  foreground: &#39;#0f0&#39;
 });
</script>

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

更多使用jquery.qrcode.js產生二維碼插件相關文章請關注PHP中文網！