qrcode-generator-es
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

qrcode-generator-es

介绍

基于 qr-code-generator-library 的二维码生成器,支持 tree-shaking

安装

npm install qrcode-generator-es --save

使用

import {
  QRCodeRender,
  renderToSvg,
  renderToTable,
  renderToCanvas,
  renderToImg,
} from "./index";

const $canvas = document.getElementById("canvas");
const qrcode = new QRCodeRender({
  renderFn: renderToCanvas,
  text: "Hello World!!!",
  el: $canvas,
});
qrcode.render();

参数

参数名 类型 默认值 说明 必填
text string - 二维码内容, 如果不传, 则需要手动调用 addData 函数
size number 100 生成的二维码大小
level string L 二维码纠错等级, L (默认)、MQH
fill string #000000 二维码填充色
background string #ffffff 二维码背景色
el HTMLElementstring - 渲染的元素, 可以是 canvas 或者 img 元素, 或者 选择器
renderFn function - 渲染函数
icon { src: string, size?: number } - 二维码中间的图标

渲染函数

  1. renderToSvg: 渲染到 svg 元素
  2. renderToTable: 渲染到 table 元素
  3. renderToCanvas: 渲染到 canvas 元素
  4. renderToImg: 渲染到 img 元素

添加二维码内容

如果二维码内容初始化了后,后续会根据接口动态变化的时候,可以根据 API 手动调整

1. 添加二维码内容

import {
  QRCodeRender,
  renderToCanvas
} from "./index";

const qrcode = new QRCodeRender({
  renderFn: renderToCanvas,
  text: "Hello",
  el: '#canvas',
});
qrcode.render();

qrcode.addData(' World')

重置二维码内容

添加二维码内容调用的是 addData 函数,重置则调用 resetData 函数

qrcode.resetData('new data')

addDataresetData 函数不需要手动调用 render 函数,会自动调用

Readme

Keywords

Package Sidebar

Install

npm i qrcode-generator-es

Weekly Downloads

13

Version

1.0.3

License

MulanPSL-2.0

Unpacked Size

75.9 kB

Total Files

7

Last publish

Collaborators

  • lucidus