文章彙整

前端開發:使用JQuery.qrcode來產生QR code吧!

Astral WebBy Astral Web 4 months agoNo Comments
首頁  /  網站設計與開發  /  前端開發  /  前端開發:使用JQuery.qrcode來產生QR code吧!

jquery.qrcode.js是純前端的jquery外掛,可以輕鬆在網頁上生產QR code。整支檔案不到3k。最小化之後更是只剩下1點多K。這篇文章要跟大家分享如何使用jquery.qrcode.js

載入JQuery和jquery.qrcode.js

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

建立一個DOM元素,待會兒我們要把QR code放進去。現在我們就建立一個div

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

接下來設定jquery.qrcode.js

$('#qrcode').qrcode('this plugin is great');

“this plugin is great”就是QR code的內容。

 

建立表格格式的QR code:

在預設情況下產生出來的QR code是canvas格式,如果擔心瀏覽器不支援的話、也可以設定table格式

$('#qrcode').qrcode({ render: 'table', text: 'this plugin is great' });

指定QR code的尺寸大小

$('#qrcode').qrcode({width: 64,height: 64,text: 'size doesn't matter'});

產生當前面頁的QR code

$('#qrcode').qrcode({width: 120,height: 120,text: window.location.href});

以上就是本次的分享,也別忘了追蹤歐斯瑞臉書粉絲團Instagram,以及訂閱我們的電子報,隨時接收第一手新知分享唷!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  前端開發

留下回應

你的電子郵件地址不會被公開.

請到您的信箱確認,即可完成訂閱。