qrcode-generator-es

介绍

qrcode-generator 的 ES 模式的二维码生成器，使用 typescript 重新编写，同时支持 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	生成的二维码大小(最终大小会根据这个值调整[<=size])	否
margin	number	0	二维码外边距	否
level	string	L	二维码纠错等级, L (默认)、M、Q、H	否
fill	string	#000000	二维码背景色	否
el	HTMLElement、string	-	渲染的元素, 可以是 canvas 或者 img 元素, 或者 选择器	否
renderFn	function	-	渲染函数	是

渲染函数

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')

addData 和 resetData 函数不需要手动调用 render 函数，会自动调用