캔버스 기반 순수 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 요소에서 QR 코드를 생성하는 데 사용됩니다. 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 중국어 홈페이지(www.php.cn)를 주목해주세요!