jQuery.qrcode:純前端生成 QR Code

2019/09/25 89 網站技術 , JavaScript , jQuery

自己還是喜歡寫網頁相關的教學,不管是什麼程式語言都沒有前端語言(HTML、CSS、JavaScript)來的習慣!只要沒有資訊安全的問題,前端可說是超級萬能!竟然連 QR Code 都可以生成,也太強大!jQuery.qrcode 依賴 jQuery 函式庫,壓縮版僅 25KB 的大小,可說是相當輕量級的前端插件,相當簡單就可以生成自定義的 QR Code,渲染方式有 canvas、image 或 div 共三種方式,其中個人挺推薦最後一個 div,中間的 image 是用 Base64 做影像的編碼,也是挺讚的一個方案!除此之外還能設定背景顏色、二維條碼本身的顏色等。

前端除了能生成 QR Code,還能掃描 QR Code 呢!來看看延伸文章吧!👉 instascan:純前端掃描 QR Code


▲ 範例原始碼 & 範例網頁截圖。

☁️ 範例的 GitHub 雲端存放庫:https://github.com/qwe987299/jquery-qrcode
🔗 jQuery.qrcode 官方網站:https://larsjung.de/jquery-qrcode/

⌨️ 一步步教你寫出來

首先請先將 jquery-qrcode-0.17.0.min.js(0.17.0 為版本,可以不一樣)下載下來並放入根目錄中,接著建立一個 index.html 的空白網頁在根目錄,接著要在 <head>~</head> 引入 jQuery 和 jQuery.qrcode 插件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery-qrcode-0.17.0.min.js"></script>

接著建立一個 div DOM 節點供置入 QR Code 使用,請放在 <body>~</body>:

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

接著在這後方加入一段腳本用來生成 QR Code:

<script>
$("#jquery-qrcode").qrcode({
    render: 'div',
    size: 250,
    text: 'https://mnya.tw/'
});
</script>

屬性方面, render 為渲染方式;size 為大小(單位為像素);text 為內容,所以掃描這個 QR Code 會是本站首頁的網址唷!至於要加上背景可以使用 background 屬性後方加十六進位色碼,填色用 fill 屬性後方加十六進位色碼,更多可以參考官方網站的選項文檔。

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB