项目场景：
提示：这里简述项目相关背景：
项目场景：老板要求分享页面的二维码增加公司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.主要代码
扫描二维码关注公众号，回复：
16854005 查看本文章
// 添加二维码中间的图片
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.页面引入
<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.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>