今時今日 QR Code 的用途很多，而很多時我們都要 Program 去 Generate 一條 Token 比個使用者去通過某啲場境。

現在就講下點樣係 Javascript 度 Generate QR Code。

### 搵 Library

已經有大神整好左呢啲惠及人民既野，咩都唔洗講去一去呢度先。

直接去呢度 : https://github.com/davidshimjs/qrcodejs

佢係可以係 Browser 上面 Generate QR Code 的 Library，原理係通過 `canvas` 畫出 QR Code 的樣子，再取出 data url 放到 `img` 上達成。

### 使用方法

可以去佢個 Git hub clone 落來用又得 : 

Git hub 即係呢個 : https://github.com/davidshimjs/qrcodejs

可以去 CDN 拎來直接用都得 : 

CDN 網站 : https://cdnjs.com/libraries/qrcodejs

#### 簡單使用方法

簡單用法:

```html
<!-- 需要你留返個 DIV 比佢用來畫出個 QR Code -->
<div id='qrcode'></div>

<script type='text/javascript'>
	
	// 傳個 div 的 element 入去就可以了
	new QRCode(document.getElementById('qrcode'), 'https://github.com/davidshimjs/qrcodejs');
</script>
```

#### 更多的設定

簡單用法:

```html
<!-- 需要你留返個 DIV 比佢用來畫出個 QR Code -->
<div id='qrcode'></div>

<script type='text/javascript'>
	
	// 都係 new 一個 QRCode 實體出來
	const qrcode = new QRCode(document.getElementById('qrcode'), {

		// 設定文字
		text: 'https://github.com/davidshimjs/qrcodejs',

		// 寬度
        width: 128,

		// 長度
		height: 128,

		// 深色部份
		colorDark : '#000000',
        
		// 淺色部份
		colorLight : '#ffffff',
        
		// 修正度
		correctLevel : QRCode.CorrectLevel.H,
  });
</script>
```

如果之後要刷新 (refresh) 個 QR Code 時，可以用以下方法就得。

```js
// 清除原本的 Code
qrcode.clear();

// 重新畫另一個文字
qrcode.makeCode('https://cdnjs.com/libraries/qrcodejs');
```