vue使用qrcodejs2生成中心logo二维码

项目场景：

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

项目场景：老板要求分享页面的二维码增加公司Logo

起初是没Logo的

---

老板想要的效果

问题描述

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

1.安装 qrcodejs2

npm install qrcodejs2 --save
1

2.引入使用

import QRCode from 'qrcodejs2'
1

3.更改logo在二维码的位置（drawImage补充）

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

ctx.drawImage() 方法在画布上绘制图像、画布或视频。
ctx.drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

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

4.主要代码

      // 添加二维码中间的图片
      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)
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---

5.页面引入

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

全部代码：

提示：详细代码

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91