Generate QRCode based on AntV/G2Plot.
npm install g2plot-qrcode> G2Plot-QRCode: plugin based on G2Plot v2. LIVE DEMO


``bash`
$ npm i --save g2plot-qrcode
- render
`ts
import { G2Plot } from '@antv/g2plot';
import { adaptor, defaultOptions } from 'g2plot-qrcode';
const qr = new G2Plot('container', {
// 二维码文本
data: 'Hello, g2plot qrcode!',
// 间距
padding: 8,
// 宽高
width: 120,
height: 120,
// 背景前景颜色
backgroundColor: 'white',
foregroundColor: 'black',
typeNumber: 0,
correctLevel: 'H', // L M H Q
// 样式自定义
pixelStyle: (pixelData) => ({}),
}, adaptor, defaultOptions);
qr.render();
`
- update
`ts`
qr.update({
data: 'hello world!',
});
``ts
export interface QRCodeOptions {
/* qrcode 的内容文本 /
readonly data: string;
/* 边框间距,默认 8px /
readonly padding?: number;
/* 二维码大小宽高,默认都是 120px /
readonly width: string;
readonly height: string;
/* 二维码 correctLevel,默认 H /
readonly correctLevel?: 'L' | 'M' | 'Q' | 'H';
/* 二维码 typeNumber,默认 0 /
readonly typeNumber?: any;
// readonly effect?: 'fusion' | 'round' | 'rect';
/* 二维码前景色,默认 black /
readonly foregroundColor?: string;
/* 二维码背景色,默认 white /
readonly backgroundColor?: string;
/* 二维码的 icon 中心图标,默认无 /
readonly icon?: {
readonly image: string; // 图片
readonly width?: number; // 图片宽高
readonly height?: number;
};
/* 单元格样式,默认无 /
readonly pixelStyle?: (pixelData: PixelData) => object;
}
MIT@hustcc.