Plug-in de génération de code QR Pure JS basé sur Canvas

Bref tutoriel

qrious est un plug-in de génération de code QR JS pur basé sur HTML5 Canvas. Divers codes QR peuvent être rapidement générés via qrious.js. Vous pouvez contrôler la taille et la couleur du code QR, et vous pouvez également encoder en Base64 le code QR généré.

Installation

Vous pouvez installer le plug-in de code QR qrious.js via bower ou npm.

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

Comment utiliser

L'utilisation de ce plug-in de génération de code QR nécessite d'introduire le fichier qrious.js dans la page.

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

La structure HTML

utilise un élément comme conteneur pour les images de code QR.

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

Plug-in d'initialisation

Vous pouvez instancier une instance d'objet via la méthode QRious().

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

Si vous l'utilisez dans Node.js, le code est le suivant :

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)

Paramètres de configuration

Les paramètres de configuration disponibles du QR qrious.js code plug-in sont les suivants :

Par exemple :

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

ou passez-le dans le constructeur :

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

Vous pouvez le passer dans le paramètre element Définir l'élément DOM utilisé pour générer les QR codes. L'élément DOM doit être un élément

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

Méthode toDataURL([mime])

La méthode toDataURL([mime]) peut générer l'URI des données codées en Base64 du code QR. Si vous ne spécifiez pas de type MIME, la valeur par défaut sera utilisée comme type 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"

Ce qui précède est le contenu Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !