快捷導(dǎo)航

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

更新時(shí)間：2016年10月17日 10:10:25 作者：天馬3798

二維碼在現(xiàn)實(shí)生活中已經(jīng)應(yīng)用很廣泛，本篇介紹了使用jquery.qrcode.js生成二維碼，有需要的朋友可以進(jìn)來了解一下。

二維碼應(yīng)用已經(jīng)滲透到我們的生活工作當(dāng)中，您只需要用手機(jī)對(duì)著二維碼“掃一掃”即可獲得所對(duì)應(yīng)的信息，方便我們了解商家、購物、觀影等等。本文將介紹一款基于jquery的二維碼生成插件qrcode，在頁面中調(diào)用該插件就能生成對(duì)應(yīng)的二維碼。

1.qrcode其實(shí)是通過使用jQuery實(shí)現(xiàn)圖形渲染，畫圖，支持canvas（HTML5）和table兩種方式，

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

參數(shù)說明：

render : "canvas",//設(shè)置渲染方式
width : 256, //設(shè)置寬度
height : 256, //設(shè)置高度
typeNumber : -1, //計(jì)算模式
correctLevel : QRErrorCorrectLevel.H,//糾錯(cuò)等級(jí)
background : "#ffffff",//背景顏色
foreground : "#000000" //前景顏色

2.使用實(shí)例：

插件引用:

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

簡(jiǎn)單實(shí)例1：

<div id="code"></div> 
<script> 
 //任意字符串 生成二維碼 
 //默認(rèn)使用Canvas畫圖 
 $('#code').qrcode('http://blog.csdn.net/u011127019'); 
</script>

簡(jiǎn)單實(shí)例2：

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

簡(jiǎn)單實(shí)例3（中文支持）：

我們?cè)囼?yàn)的時(shí)候發(fā)現(xiàn)不能識(shí)別中文內(nèi)容的二維碼，通過查找多方資料了解到，jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個(gè)方法默認(rèn)會(huì)獲取它的Unicode編碼，如果有中文內(nèi)容，在生成二維碼前就要把字符串轉(zhuǎn)換成UTF-8，然后再生成二維碼。

<div id="code"></div> 
<script> 
 //如果內(nèi)容中有中文，在生成二維碼錢就要把字符串轉(zhuǎn)換成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 
 }); 
 
 //就目前 微信/支付寶等 不識(shí)別其他顏色的二維碼 
 $('#code').qrcode({ 
  text: toUtf8('我是tianma'), 
  width: 150, 
  height: 150, 
  background: '#f00', 
  foreground: '#0f0' 
 }); 
</script>

實(shí)例4：

//text 屬性的值長(zhǎng)度不能太長(zhǎng)，最大字節(jié)數(shù) 10208 
//text 字符串太長(zhǎng) 微信/支付寶等掃一掃無法識(shí)別，微博識(shí)別內(nèi)容更多 
//微博掃一掃：大約200 字以內(nèi)，微信掃一掃：大約 160字以內(nèi)，支付寶掃一掃：大約130字符以內(nèi) 
$('#code').qrcode({ 
 text: toUtf8('SignalR 是 ASP.NET 團(tuán)隊(duì)正在開發(fā)的一個(gè) Microsoft .NET Framework 庫和 jQuery 插件，可能包括在以后版本的 ASP.NET 平臺(tái)中。 它提供了一些前景極為光明的功能，而這些功能正是，并且是越來越多的，當(dāng)前不曾具有的，'), 
 width: 150, 
 height: 150 
});

希望本文所述對(duì)你有所幫助，使用jquery.qrcode.js生成二維碼插件內(nèi)容就給大家介紹到這里了。希望大家繼續(xù)關(guān)注我們的網(wǎng)站!

您可能感興趣的文章: