Vue uses qrcodejs2 to generate the center logo QR code

Project scenario:

提示：这里简述项目相关背景：

Project scenario: The boss asks to share the QR code of the page to add the company logo

There was no logo at first

---

The effect the boss wants

Problem Description

提示：这里使用qrcodejs2生成二维码

1. Install qrcodejs2

npm install qrcodejs2 --save

2.Introduction and use

import QRCode from 'qrcodejs2'

3. Change the position of the logo in the QR code (supplemented by drawImage)

如果logo不在二维码中间，可直接修改drawImage属性或者直接更改二维码宽高尺寸

The ctx.drawImage() method draws an image, canvas, or video on the canvas.
The ctx.drawImage() method can also draw parts of the image and/or increase or decrease the size of the image.
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img specifies the image, canvas, or video to use.
sx Optional. The x-coordinate position at which to start cutting.
sy Optional. The y-coordinate position to start shearing.
width is optional. The width of the cropped image.
Sheight is optional. The height of the clipped image.
x Position the x coordinate of the image on the canvas.
y places the y coordinate of the image on the canvas.
width is optional. The width of the image to use. (Stretch or shrink the image)
height Optional. The height of the image to use. (stretch or reduce image)

ctx.drawImage(logo, (128 - 128 / 3.7) / 2, (128 - 128 / 3.7) / 2, 128 / 3.7, 128 / 3.7)

4. Main code

      // 添加二维码中间的图片
      if (this.logoImage) {
    
    
        let logo = new Image()
        logo.setAttribute('crossOrigin', 'Anonymous')
        logo.src = this.logoImage
        logo.onload = () => {
    
    
          let qrImg = this.qrcode._el.getElementsByTagName('img')[0]
          let canvas = this.qrcode._el.getElementsByTagName('canvas')[0]
          this.qrcode._el.title = ''
          canvas.style.display = 'inline-block'
          let ctx = canvas.getContext('2d')
          // 设置logo的大小为二维码图片缩小的3.7倍
          ctx.drawImage(logo, (128 - 128 / 3.7) / 2, (128 - 128 / 3.7) / 2, 128 / 3.7, 128 / 3.7)
          qrImg.src = canvas.toDataURL()
          qrImg.style.display = 'none'
          this.$refs.id.appendChild(this.qrcode._el)
        }
      }

---

5. Page introduction

 <qrcode id="shareQRCode" :text="'https://www.yunqilianmeng.cn/#/shareTrial?id='+ id"
         logoImage="https://baidu.cn/server/upload/1690.png"
  />

All code:

Tip: Detailed code

<template>
  <div :id="id" :ref="id" style="width: 100%;height: 100%;text-align: center;"/>
</template>
<script>
import QRCode from 'qrcodejs2'

export default {
    
    
  props: {
    
    
    id: {
    
    
      type: String,
      required: true
    },
    text: {
    
     // 后端返回的二维码地址
      type: String,
      default: 'http://jindo.dev.naver.com/collie'
    },
    width: {
    
    
      type: String,
      default: '128'
    },
    height: {
    
    
      type: String,
      default: '128'
    },
    colorDark: {
    
    
      type: String,
      default: '#000000'
    },
    colorLight: {
    
    
      type: String,
      default: '#ffffff'
    },
    logoImage: {
    
    
      type: String,
      default: ''
    }
  },
  data () {
    
    
    return {
    
    
      qrcode: ''
    }
  },
  watch: {
    
    
    text (newText) {
    
    
      this.createQrcode()
    }
  },
  mounted () {
    
    
    this.createQrcode()
  },
  methods: {
    
    
    createQrcode () {
    
    
      if (this.qrcode) {
    
     // 有新的二维码地址了，先把之前的清除掉
        this.$refs[this.id].innerHTML = ''
      }
      this.qrcode = new QRCode(this.$refs[this.id], {
    
    
        text: this.text, // 页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: this.width, // 二维码宽度 （不支持100%）
        height: this.height, // 二维码高度 （不支持100%）
        colorDark: this.colorDark,
        colorLight: this.colorLight,
        correctLevel: QRCode.CorrectLevel.H
      })
      // 添加二维码中间的图片
      if (this.logoImage) {
    
    
        let logo = new Image()
        logo.setAttribute('crossOrigin', 'Anonymous')
        logo.src = this.logoImage
        logo.onload = () => {
    
    
          let qrImg = this.qrcode._el.getElementsByTagName('img')[0]
          let canvas = this.qrcode._el.getElementsByTagName('canvas')[0]
          this.qrcode._el.title = ''
          canvas.style.display = 'inline-block'
          let ctx = canvas.getContext('2d')
          // 设置logo的大小为二维码图片缩小的3.7倍，第二与第三参数代表logo在二维码的位置
          ctx.drawImage(logo, (128 - 128 / 3.7) / 2, (128 - 128 / 3.7) / 2, 128 / 3.7, 128 / 3.7)
          qrImg.src = canvas.toDataURL()
          qrImg.style.display = 'none'
          this.$refs.id.appendChild(this.qrcode._el)
        }
      }
      console.log(this.qrcode, 'qrcode')
    },
    // 制作另一个二维码
    updateCode () {
    
    
      this.qrcode.makeCode('http://naver.com')
    }
  }
}
</script>