[轉][javascript] 來做個 QR Code 產生器吧! jQuery.qrcode－碎碎念

轉自 https://kakadodo.github.io/2018/08/13/plugin-jquery-qrcode/

因應公司出現的奇怪需求…這次的任務是要做出 QR Code 產生器，本來一臉愁雲慘霧的自己藉由了估狗大神的幫助，瞬間哀愁變成喜悅啊~
感謝另一個大神 jeromeetienne 做出這個無敵簡單操作的 jQuery.qrcode 套件!!

blog image
<這次的文章附圖被我做得好像網拍頁面的縮圖XDD 無腦產生>

會需要做 QR Code 產生器的原因在於要讓不同的使用者可以取得專屬於他的 QR Code 連結，而且最重要的一點是產生這個東西需要在無網路的環境 ( º﹃º )
(內心大概吶喊了上百次: NO~為何又是無網路!!!大家還活在 21 世紀嗎?!)

所以之前提到的 PhoneGap APP 又要派上用場了!無網路界的前端霸主非他莫屬!在 PhoneGap 提供的環境下，用熟悉的 HTML、CSS 跟 JavaScript 來寫即可~有興趣的可以參考之前寫的這篇不用 CLI 也能製作 Andriod APP - Adobe PhoneGap

基於上述產生 QR Code 的條件還算單純，只要套件可以滿足產生特定網址這件事就 OK 了!所以我找到了這個非常親民的 jQuery.qrcode.js

雖然大神已經有寫操作步驟了~但還是用自己理解的方式來說明怎麼使用:

第一步，於你的頁面載入 jQuery.qrcode.js，因為這支是用 jQuery 寫的，所以也別忘記載入 jQuery 啊~(自己用3.x版本還是可運行)
1

<script type="text/javascript" src="jquery.qrcode.min.js"></script>
html 建立一個 div 來放 qrcode (div 會是 qrcode 的外層元素)
1

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

qrcode 有兩種產生的格式，一個是用 html 的 table 去拼出圖案，另一個是用 canvas 畫出來。

// canvas
$('#qrcode').qrcode({
  width: 64,
  height: 64,
  text: 'https://kakadodo.github.io/'
});
// table
$('#qrcode').qrcode({
  render: "table",
  text: "https://kakadodo.github.io/"
});

然後，QR Code 就出來了 END 😆😆😆😆😆😆😆😆😆😆

這款套件說簡單真得很簡單簡單到讓我覺得這樣真的好嗎? 套件的 GitHub 也只列出簡易步驟，沒有其他的詳細設定…其實這款也是參照另一款原生 JavaScript 版本來改寫的，有特地跑去看原本的是不是有比較詳細的說明，但結果是更精簡XD 連步驟的懶得寫了。
但確實是有滿足我的需求啦所以就開心的接受並使用它了!!

附上線上範例檔，有 canvas 跟 table 兩種顯示…覺得用 table 來生成有點厲害。

以上內容如有勘誤，還請不吝告知🙇