一:npm安装包
npm install qrcanvas -S
二:组件引入
import { qrcanvas } from ‘qrcanvas’;
三: 使用
3.1:自定义颜色
const canvas = qrcanvas({
cellSize: 8,
correctLevel: 'H',
data: 'https://www.baidu.com',
foreground: [
// foreground color
{ style: '#55a' },
// outer squares of the positioner
{ row: 0, rows: 7, col: 0, cols: 7, style: '#c33' },
{ row: -7, rows: 7, col: 0, cols: 7, style: '#c33' },
{ row: 0, rows: 7, col: -7, cols: 7, style: '#c33' },
// inner squares of the positioner
{ row: 2, rows: 3, col: 2, cols: 3, style: '#621' },
{ row: -5, rows: 3, col: 2, cols: 3, style: '#621' },
{ row: 2, rows: 3, col: -5, cols: 3, style: '#621' },
]
});
let id= document.getElementById('id');
id.appendChild(canvas);
3.2自定义logo
自定义为文字
const canvas = qrcanvas({
cellSize: 8,
correctLevel: 'H',
data: 'https://www.baidu.com',
foreground: [
// foreground color
{ style: '#55a' },
// outer squares of the positioner
{ row: 0, rows: 7, col: 0, cols: 7, style: '#c33' },
{ row: -7, rows: 7, col: 0, cols: 7, style: '#c33' },
{ row: 0, rows: 7, col: -7, cols: 7, style: '#c33' },
// inner squares of the positioner
{ row: 2, rows: 3, col: 2, cols: 3, style: '#621' },
{ row: -5, rows: 3, col: 2, cols: 3, style: '#621' },
{ row: 2, rows: 3, col: -5, cols: 3, style: '#621' },
],
logo: {
text: 'QRCanvas',
options: {
color: 'dodgerblue',
},
}
});
let docum = document.getElementById('logins')
docum.appendChild(canvas);
自定义图片
const image = new Image();
image.src = 'https://user-images.githubusercontent.com/3139113/38300650-ed2c25c4-382f-11e8-9792-d46987eb17d1.png';
image.onload = () => {
const canvas = qrcanvas.qrcanvas({
cellSize: 8,
correctLevel: 'H',
data: 'hello, world',
logo: {
image,
},
});
container.appendChild(canvas);
};