Cloud F2E Blog

前端開發紀錄

0%

JavaScript - 使用 jQuery 來產生 QR CODE

發表於 分類於 Disqus：
本篇來介紹純前端生成 QR CODE 的方式

jQuery.qrcode 介紹

jQuery.qrcode 官網
NPM jQuery.qrcode

使用方式算挺簡單，幾個重要參數設定一下就能迅速產生 QR CODE

參考範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
  <div id="jquery-qrcode-canvas"></div>

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

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

  <!-- 引入 jQuery 引入 jQuery jquery.qrcode  -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js'></script>
  <script>
    /* canvas */
    $("#jquery-qrcode-canvas").qrcode({
      render: 'canvas',
      size: 250,
      text: 'https://syj0905.github.io/'
    });

    /* image */
    $("#jquery-qrcode-image").qrcode({
      render: 'image',
      size: 250,
      text: 'https://syj0905.github.io/'
    });

    /* div */
    $("#jquery-qrcode-div").qrcode({
      render: 'div',
      size: 250,
      text: 'https://syj0905.github.io/'
    });
  </script>
</body>

參考資料

jQuery.qrcode：純前端生成 QR Code
10 Best Custom QR Code Generators In JavaScript (2021 Update)