キャンバスベースの Pure JS QR コード生成プラグイン

簡単なチュートリアル

qrious は、HTML5 Canvas に基づいた純粋な JS QR コード生成プラグインです。 qrious.js を通じてさまざまな QR コードを迅速に生成できます。QR コードのサイズと色を制御でき、生成された QR コードを Base64 エンコードすることもできます。

インストール

qrious.js QR コード プラグインは bower または npm を通じてインストールできます。

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

使い方

このQRコード生成プラグインを使用するには、qrious.jsファイルをページに導入する必要があります。

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

HTML 構造

は、QR コード画像のコンテナとして 要素を使用します。

<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 QR コード プラグインで利用可能な設定パラメータは次のとおりです:

例:

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

またはコンストラクターで以下を渡します:

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

QR コードの生成に使用される DOM 要素を要素パラメータに設定できます。 DOM 要素は、 要素または 要素である必要があります。

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

toDataURL([mime]) メソッド

toDataURL([mime]) メソッドは、QR コードの Base64 エンコードデータの URI を生成できます。 MIME タイプを指定しない場合は、デフォルト値が MIME タイプとして使用されます。

const qr = new QRious({
  value: 'http://www.htmleaf.com/'
})
 
console.log(qr.toDataURL())
//=> "data:image/png;base64,iVBOR...AIpqDnseH86KAAAAAElFTkSuQmCC"
console.log(qr.toDataURL('image/jpeg'))
//=> "data:image/jpeg;base64,/9j/...xqAqIqgKFAAAAAq3RRQAUUUUAf/Z"

上記は内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。