>  기사  >  웹 프론트엔드  >  캔버스 기반 순수 JS QR 코드 생성 플러그인

캔버스 기반 순수 JS QR 코드 생성 플러그인

黄舟
黄舟원래의
2017-01-19 13:44:421395검색

간단한 튜토리얼

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(&#39;qr&#39;),
    value: &#39;http://www.htmleaf.com/&#39;
  })
})()

Node.js에서 사용하는 경우 코드는 다음과 같습니다.

const express = require(&#39;express&#39;)
const QRious = require(&#39;qrious&#39;)
 
const app = express()
 
app.get(&#39;/qr&#39;, (req, res) => {
  const qr = new QRious({ value: &#39;http://www.htmleaf.com/&#39; })
 
  res.end(new Buffer(qr.toDataURL(), &#39;base64&#39;))
})
 
app.listen(3000)

구성 매개변수

qrious.js QR 코드 플러그에서 사용 가능한 구성 매개변수-

캔버스 기반 순수 JS QR 코드 생성 플러그인

예:

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

또는 생성자에 전달:

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

QR 코드를 설정할 수 있습니다. 요소 매개변수 DOM 요소에서 QR 코드를 생성하는 데 사용됩니다. DOM 요소는 요소이거나 캔버스 기반 순수 JS QR 코드 생성 플러그인

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

toDataURL([mime]) 메소드

toDataURL([mime]) 메소드는 QR 코드의 Base64 인코딩 데이터의 URI를 생성할 수 있습니다. MIME 유형을 지정하지 않으면 기본값이 MIME 유형으로 사용됩니다.

const qr = new QRious({
  value: &#39;http://www.htmleaf.com/&#39;
})
 
console.log(qr.toDataURL())
//=> "data:image/png;base64,iVBOR...AIpqDnseH86KAAAAAElFTkSuQmCC"
console.log(qr.toDataURL(&#39;image/jpeg&#39;))
//=> "data:image/jpeg;base64,/9j/...xqAqIqgKFAAAAAq3RRQAUUUUAf/Z"

위 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.