基于 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 (默认)、M 、Q 、H
|
否 |
fill |
string |
#000000 |
二维码填充色 | 否 |
background |
string |
#ffffff |
二维码背景色 | 否 |
el |
HTMLElement 、string
|
- | 渲染的元素, 可以是 canvas 或者 img 元素, 或者 选择器 |
否 |
renderFn |
function |
- | 渲染函数 | 是 |
icon |
{ src: string, size?: number } |
- | 二维码中间的图标 | 否 |
渲染函数
renderToSvg
: 渲染到svg
元素renderToTable
: 渲染到table
元素renderToCanvas
: 渲染到canvas
元素renderToImg
: 渲染到img
元素
如果二维码内容初始化了后,后续会根据接口动态变化的时候,可以根据 API
手动调整
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
函数,会自动调用