캔버스 기반 순수 JS QR 코드 생성 플러그인-H5 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-01-19 13:44:42

원래의

1423명이 탐색했습니다.

간단한 튜토리얼

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(&#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 요소는

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 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!