ylbtech-JavaScript-Tool：jquery.qrcode.js

?

1.返回頂部

1、 插件描述：jquery.qrcode.js 是一個(gè)能夠在客戶端生成矩陣二維碼QRCode 的jquery插件 ，使用它可以很方便的在頁面上生成二維條碼。

如何使用它

將jquery.qrcode.min.js和jquery添加到您的網(wǎng)頁中

<script src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>

然后創(chuàng)建一個(gè)DOM元素去包含生成qr碼。

<div id="qrcode"></div>

然后你在此容器中的添加qrcode

<script>jQuery(function(){jQuery('#qrcode').qrcode("http://www.jq22.com"); }) </script>

就這么簡單，您想要的二維碼就生成了。

---

進(jìn)階用法

指定二維碼的生成方式：

可以在調(diào)用函數(shù)的同時(shí)輸入想要的二維碼生成方式（table/canvas）。

//使用table生成 jQuery('#qrcode').qrcode({render: "table",text: "http://www.jq22.com" });//使用canvas生成 jQuery('#qrcode').qrcode({render: "canvas",text: "http://www.jq22.com" });

指定生成二維碼的大小：

可以在調(diào)用函數(shù)的同時(shí)輸入想要生成二維碼的寬度和高度即可指定生成的二維碼的大小。

//生成100*100(寬度100，高度100)的二維碼 jQuery('#qrcode').qrcode({render: "canvas", //也可以替換為tablewidth: 100,height: 100,text: "http://www.jq22.com" });

指定生成二維碼的色彩樣式：

可以在調(diào)用函數(shù)的同時(shí)輸入想要生成二維碼的前景色和背景色即可指定生成的二維碼的色彩樣式。

//生成前景色為紅色背景色為白色的二維碼 jQuery('#qrcode').qrcode({render: "canvas", //也可以替換為tableforeground: "#C00",background: "#FFF",text: "http://www.jq22.com" });

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI進(jìn)行轉(zhuǎn)碼 2、

2.返回頂部

1、

jquery.qrcode.js是依賴jquery的,所以要先引入jquery再引入jquery.qrcode.js

<script type='text/javascript' src='js/jquery.min.js'></script> <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

在頁面上添加一個(gè)div標(biāo)簽，用于創(chuàng)建渲染區(qū)域

<div id="qrcode"></div>

通過下面代碼就可以生成一個(gè)默認(rèn)256×256大小的二維碼

<script type="text/javascript">jQuery('#qrcode').qrcode("http://www.cnblogs.com/HtmlCss3/"); </script>

效果圖

改變它的大小、二維碼顏色、背景色配置：

jQuery("#qrcode").qrcode({render: "canvas", // 渲染方式有table方式和canvas方式width: 256, //默認(rèn)寬度height: 256, //默認(rèn)高度text: "http://www.cnblogs.com/HtmlCss3/", //二維碼內(nèi)容typeNumber: -1, //計(jì)算模式一般默認(rèn)為-1correctLevel: 2, //二維碼糾錯(cuò)級別background: "#ffffff", //背景顏色foreground: "#000000" //二維碼顏色 });

jquery.qrcode.js二維碼內(nèi)容是不支持中文的，如果出現(xiàn)中文，結(jié)果就是一串亂碼，這個(gè)主要是兩者的編碼方式不一樣所導(dǎo)致的，中文一般情況下是UTF-16格式，如果想要支持中文，那就把二維碼內(nèi)容統(tǒng)一改成UTF-8格式的，順便貼一下轉(zhuǎn)換的代碼：

function utf16to8(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; }

當(dāng)你在配置的時(shí)候把二維碼的內(nèi)容轉(zhuǎn)換一下就可以了~

text: utf16to8("文字內(nèi)容") //二維碼內(nèi)容

有時(shí)候呢領(lǐng)導(dǎo)可能會讓你把自己公司的logo放上去，但是jquery.qrcode.js又不支持這種自定義logo，這時(shí)候腫么辦呢？其實(shí)也很簡單，在div里創(chuàng)建一個(gè)img利用定位很容易就可以搞定它了

2、

3.返回頂部

4.返回頂部

5.返回頂部

0、 http://jeromeetienne.github.io/jquery-qrcode/ 1、 http://www.jq22.com/jquery-info294 2、

6.返回頂部

作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。

轉(zhuǎn)載于:https://www.cnblogs.com/storebook/p/9405129.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript-Tool：jquery.qrcode.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。