一: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);};