背景:需求是在web端生成一张带有二维码的分享海报,用户可以将海报图片保存到本地。
实现思路: 使用qrcode生成二维码图片,再使用canvas将二维码和海报背景合成一张图片;
直接看代码
👇
// 按钮
<button v-else class="btn-default btn-share" @click.stop="sharePopup">
<span>打开分享图片</span>
</button>
// 遮盖层和海报部分
<!-- 遮盖层 -->
<div v-if="showSharePopup" class="cover">
<!-- 关闭按钮 -->
<span class="close" @click="closeSharePopup">✖️</span>
</div>
<!-- 二维码 -->
<canvas v-show="false" id="canvas" />
<!-- 海报 -->
<canvas v-show="showSharePopup"
id="myCanvas"
width="200"
height="100" />
import QRCode from 'qrcode';
data() {
// 销售侧点击分享图片
showSharePopup: false,
posterHtmlBg: require('@/images/web/crm-close-order.png'), // 背景图
// 二维码的dataUrl
qrcodeUrl: '',
// 生成二维码的url
creatCodeUrl: 'xxxxxxxxxxxxxxxxxxxx',
}
async sharePopup() {
this.showSharePopup = true;
await this.createQrcode(this.creatCodeUrl);
this.drawAndShareImage(this.posterHtmlBg, this.qrcodeUrl, '');
},
closeSharePopup() {
this.showSharePopup = false;
},
createQrcode(text) {
console.log('text333', text);
// 生成二维码
const canvas = document.getElementById('canvas');
QRCode.toCanvas(canvas, text, {
margin: 0,
});
let data = canvas.toDataURL('image/png', 1);
this.qrcodeUrl = data;
},
//img1背景图、img2二维码
drawAndShareImage(img1, img2) {
let canvas = document.getElementById('myCanvas');
canvas.width = 750;
canvas.height = 1334;
let context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#fff';
context.fill();
let myImage = new Image();
myImage.src = img1;
myImage.crossOrigin = 'Anonymous';
myImage.onload = function() {
context.drawImage(myImage, 0, 0, 750, 1334);
let myImage2 = new Image();
myImage2.src = img2;
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function() {
context.drawImage(myImage2, 202, 667, 350, 350);
let base64 = canvas.toDataURL('image/png');
let img = document.getElementById('myCanvas');
img.setAttribute('src', base64);
};
};
},