项目场景：

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

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

起初是没Logo的

老板想要的效果

问题描述

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

1.安装 qrcodejs2

npm install qrcodejs2 --save

2.引入使用

import QRCode from 'qrcodejs2'

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)

4.主要代码

      // 添加二维码中间的图片if (this.logoImage) {let logo = new Image()logo.setAttribute('crossOrigin', 'Anonymous')logo.src = this.logoImagelogo.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.页面引入

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

全部代码：

提示：详细代码

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