基於canvas的純JS二維碼生成插件

簡要教學

qrious是一款基於HTML5 Canvas的純JS二維碼產生外掛程式。透過qrious.js可以快速產生各種二維碼，你可以控制二維碼的尺寸顏色，也可以將產生的二維碼進行Base64編碼。

 安裝

可以透過bower或npm來安裝qrious.js二維碼外掛程式。

$ npm install --save qrious
$ bower install --save qrious

 使用方法

使用此二維碼產生外掛程式需要在頁面中引入qrious.js檔案。

<script type="text/javascript" src="js/qrious.js"></script>

 HTML結構

使用一個元素來作為二維碼圖片的容器。

<canvas id="qr"></canvas>

初始化插件

可以透過QRious()方法來實例化一個物件實例。

(function() {
  const qr = new QRious({
    element: document.getElementById('qr'),
    value: 'http://www.htmleaf.com/'
  })
})()

如果你在Node.js中使用，程式碼如下：

const express = require('express')
const QRious = require('qrious')
 
const app = express()
 
app.get('/qr', (req, res) => {
  const qr = new QRious({ value: 'http://www.htmleaf.com/' })
 
  res.end(new Buffer(qr.toDataURL(), 'base64'))
})
 
app.listen(3000)

設定參數

qrious.js二維碼插件的可用設定參數如下：

例如：

傳入：

const qr = new QRious()
qr.background = '#000'
qr.foreground = '#fff'
qr.level = 'H'
qr.size = 500
qr.value = 'http://www.htmleaf.com/'

你可以在element參數中設定用於產生二維碼的DOM元素。 DOM元素必須是元素或元素。

const qr = new QRious({
  background: '#000',
  foreground: '#fff',
  level: 'H',
  size: 500,
  value: 'http://www.htmleaf.com/'
})

 toDataURL([mime])方法

透過toDataURL([mime])方法可以產生二維碼的Base64編碼資料的URI。如果你沒有指定MIME Type，會使用預設值作為mime類型。

const qr = new QRious({
  element: document.querySelector('canvas'),
  value: 'http://www.htmleaf.com/'
})
 
qr.canvas.parentNode.appendChild(qr.image)

以上就是的內容，更多相關內容請關注PHP中文網（www.php.cn）！