Pure JS QR code generation plug-in based on canvas

Brief Tutorial

qrious is a pure JS QR code generation plug-in based on HTML5 Canvas. Various QR codes can be quickly generated through qrious.js. You can control the size and color of the QR code, and you can also Base64 encode the generated QR code.

Installation

You can install the qrious.js QR code plug-in through bower or npm.

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

How to use

To use this QR code generation plug-in, you need to introduce the qrious.js file into the page.

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

HTML structure

Use a element as a container for QR code images.

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

Initialization plug-in

You can instantiate an object instance through the QRious() method.

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

If you use it in Node.js, the code is as follows:

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)

Configuration parameters

The available configuration parameters of qrious.js QR code plug-in are as follows:

For example:

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

Or pass it in the constructor:

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

You can set the QR code used to generate the QR code in the element parameter DOM element. The DOM element must be a element or an element.

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

toDataURL([mime]) method

The toDataURL([mime]) method can generate the URI of the Base64 encoded data of the QR code. If you do not specify a MIME Type, the default value will be used as the mime type.

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"

The above is the content. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!