The past, after all, is the past

preface

1 introduction

Common Configuration Items

QRCode

{/ / address information text: 'https://static-alias-1.360buyimg.com/jzt/md/images/re-logo.png', / / qr code wide width: 100, / / qr code high height: 100, // TWO-DIMENSIONAL code bright colorDark: '#000000', // two-dimensional code dark colorLight: '# FFFFFF ', // Error correction level // The higher the error correction level, the more information the whole need to carry // L: 1, M: 0, Q: 3, H : 2 correctLevel: QRCode.CorrectLevel.H }Copy the code

mcanvas

Left: 0, top: 0, pos: {x: 'center', y: 'center', scale: 0.84, rotate: 1}, // width: 0 Text-align: 'center', normalStyle: {font: 'italic small-caps bold 24px arial', color: '# FFFFFF '}, // Image info type: 'JPG ', quality: 0.8,}Copy the code

Commonly used method

background

MC. background(path, option)Copy the code

add

// Add (path, option)Copy the code

text

// add(text, option)Copy the code

watermark

// watermark(path, option)Copy the code

draw

/ / the synthesis of MC. The draw (option)Copy the code

2 use

The installation

NPM install qrcodejs2 --save NPM install McAnvas --save Switch mirror NPM install McAnvas - save - canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/Copy the code

Synthetic images

<template> <div> <div class="qrcode" ref="qrCodeUrl" v-show="false"></div> <img :src="b64" /> </div> </template> <script> import { MCanvas } from 'mcanvas' import QRCode from 'qrcodejs2' export default { data() { return { isShowBtn: false, value: 10, b64: }}, mounted() {this.creatqrCode ().then(() => {this.creatqrCode ().creatQrCode(). 0) }) }, methods: { init() { const mc = new MCanvas({ width: 500, height: 500, backgroundColor: 'black'}) // background: prepare the background; Offers a variety of patterns MC. Background (' https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3744052883, & FM = 26 & gp = 0. 4237116621 JPG ', {left: 0, top: 0, color: '#000000', type: 'origin'}) MC. Add (' https://img1.360buyimg.com/n6/jfs/t1/170673/4/2913/244729/6002af29E86fbc8f4/a678f2fedc23b5cc.jpg '{width: 0, pos: {x: 'center', y: 'center', scale: 0.84, rotate: 1}}) <br> <br> normalStyle: {// width: '300px', // align: 'center', normalStyle: {font: 'ITALic Small-caps bold 24px Arial ', color: '# FFFFFF'}, pos: {x: '40%', y: 0}}) MC. Watermark (this. $refs. QrCodeUrl. QuerySelector (" img "). The SRC, {width: 60, pos: 'rightBottom'}) / / draw the final draw function, for the final draw; Mc.draw ({type: 'JPG ', quality: 0.8, success: b64 => {console.log('b64', b64)}, error: err => { console.log('b64', err) } }).then(b64 => { this.b64 = b64 }) }, creatQrCode() { const qrcode = new QRCode(this.$refs.qrCodeUrl, { text: 'https://static-alias-1.360buyimg.com/jzt/md/images/re-logo.png', width: 100, height: 100, colorDark: '#000000', colorLight: '# FFFFFF ', // The higher the correctLevel is, the more information is needed // L: 1, M: 0, Q: 3, H: 2 correctLevel: QRCode.CorrectLevel.H }) console.log('qrcode', qrcode) return Promise.resolve(qrcode) } } } </script> <style lang="scss" scoped></style>Copy the code

3. Pay attention to

1. When NPM fails to install McAnvas, switch the image source. 2

The end of the

Don’t worry. I’m here. Everything’s gonna be okay

Good night ^_^

Refer to the link

  • McAnvas document
  • Qrcode configuration items

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS