一：npm安装包

npm install qrcanvas -S

二：组件引入

import { qrcanvas } from ‘qrcanvas’;

三： 使用

3.1：自定义颜色

const canvas = qrcanvas({cellSize: 8,correctLevel: 'H',data: '',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: '',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-/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);};