간단한 튜토리얼
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 구조
<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)를 주목해주세요!