Reines JS-QR-Code-Generierungs-Plug-in basierend auf Canvas

Kurzes Tutorial

qrious ist ein reines JS-QR-Code-Generierungs-Plug-in basierend auf HTML5 Canvas. Über qrious.js können schnell verschiedene QR-Codes generiert werden. Sie können die Größe und Farbe des QR-Codes steuern und den generierten QR-Code auch Base64 kodieren.

Installation

Sie können das qrious.js QR-Code-Plug-in über Bower oder npm installieren.

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

So verwenden Sie

Die Verwendung dieses Plug-ins zur QR-Code-Generierung erfordert das Einfügen der Datei qrious.js in die Seite.

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

HTML-Struktur

verwendet ein -Element als Container für QR-Code-Bilder.

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

Initialisierungs-Plug-in

Sie können eine Objektinstanz über die QRious()-Methode instanziieren.

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

Wenn Sie es in Node.js verwenden, lautet der Code wie folgt:

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)

Konfigurationsparameter

Die verfügbaren Konfigurationsparameter von qrious.js QR Code-Plug-Ins lauten wie folgt:

Zum Beispiel:

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

oder übergeben Sie es im Konstruktor:

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

Sie können es im Elementparameter übergeben. Legen Sie das DOM-Element fest, das zum Generieren von QR-Codes verwendet wird. Das DOM-Element muss ein -Element oder ein -Element sein.

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

toDataURL([mime])-Methode

Die toDataURL([mime])-Methode kann den URI der Base64-codierten Daten des QR-Codes generieren. Wenn Sie keinen MIME-Typ angeben, wird der Standardwert als MIME-Typ verwendet.

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"

Das Obige ist der Inhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!