2022年7月14日 星期四

jquery.qrcode.js 前端也能產生QRCode

 現在QRCode已經越來越流行了,從最簡單的掃描QRCode來取得網址,到利用QRCode完成報到程序等等;現在生活周遭已經到處都有機會看得到QRCode了,因此身為前端工程師,勢必會有越來越多機會在前端打上QRCode的圖片,今天就來介紹一款簡單易用的QRCode library吧!

關於jquery.qrcode.js

從名稱就很容易可以猜出,jquery.qrcode.js是一款用來產生QRCode的jquery plugin,因此要使用前記得先加入jquery才行。

使用jquery.qrcode.js

首先先方上一個<div>標籤

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

接著加入JavaScript

$('#qrcode').qrcode('http://www.google.com');

完成!簡單到我都覺得這篇文章有灌水嫌疑了XD

進階使用jquery.qrcode.js

預設jquery.qrcode.js是使用HTML5的canvas來完成,但舊版IE不支援canvas,因此若有需要支援舊版瀏覽器需求的話,可以加上render: table參數

$('#qrcode-table').qrcode({
	render: 'table',
  text: 'http://www.google.com'
});

如果需要指定大小(預設是256x256)也可以加入widthheight參數,不過常跟寬記得設成一樣,因為QRCode都是正方形的,說長寬設為長方形則會出破圖現象

$('#qrcode-size').qrcode({
	width: 120,
  height: 120,
  text: 'http://www.google.com'
});

資料來源:https://ithelp.ithome.com.tw/articles/10185571

沒有留言: