根据接口返回的参数生成一个带有相关链接的二维码 然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面
所需要的参数和图片列表都是父组件传过来的 使用了之前写过的alert弹窗
<template>
<v-alert
hide-cont
:min-width="imageList.length*canvasWidth"
:width="684"
class="composite-poster"
bg-color="transparent"
:is-cancel="false"
@cancel="$emit('cancel')">
<div slot="slot3">
<ul class="g-center downloading-cont g-loading-col3"
v-loading="mergeImagesLoading">
<li class="g-relative"
v-for="(item, i) in imageList"
:key="i">
<canvas class="jMyCanvas"
:style="{width:`${canvasWidth}px`,height:`${canvasHeight}px`}"
:width="`${canvasRenderWidth}px`"
:height="`${canvasRenderHeight}px`"></canvas>
<a class="g-btn-two g-pointer download-button g-absolute"
:href="item.download"
:download="item.filename">
{{$_lang('下载到桌面')}}
</a>
</li>
</ul>
</div>
</v-alert>
</template>
<script>
export default {
name: 'composite-poster',
props: {
imageList: {required: true, type: Array}, //图片列表
qrCode: {required: true}, //二维码
},
data() {
return {
mergeImagesLoading: true, // 请求分享图片loading
canvasWidth: 270,
canvasHeight: 480,
rate: 2,//放大比率
};
},
computed: {
canvasRenderWidth() {
return this.canvasWidth * this.rate;
},
canvasRenderHeight() {
return this.canvasHeight * this.rate;
},
},
methods: {
// 合并成分享海报
mergeImages() {
if (this.qrCode === null) {
return this.$message.error(this.$_lang('生成专属海报失败'));
}
this.$nextTick(() => {
// 合并图片
const canvasElements = document.getElementsByClassName('jMyCanvas');
this.imageList.forEach((elem, i) => {
let {imgUrl} = elem;
let currentImage = document.createElement('img');
let currentElement = canvasElements[i];
currentImage.src = imgUrl;
currentImage.setAttribute("crossOrigin", 'anonymous');
let context = currentElement.getContext("2d");
currentImage.addEventListener('error', () => {
this.$message.error(this.$_lang('获取图片失败'));
}, false);
currentImage.addEventListener('load', () => {
context.drawImage(currentImage, 0, 0, this.canvasRenderWidth, this.canvasRenderHeight);
context.drawImage(this.qrCode, 99 * this.rate, 348 * this.rate, 72 * this.rate, 70 * this.rate);
elem.download = currentElement.toDataURL("image/jpeg", 1);
this.mergeImagesLoading = false;
}, false);
});
});
},
},
created() {
this.mergeImages();
}
};
</script>
<style lang="scss"
rel="stylesheet/scss">
.composite-poster {
min-width: 1200px;
.downloading-cont {
min-height: 480px;
canvas {
border: 2px solid #ffebae;
border-radius: 2px;
display: block;
}
> li:not(:first-child) {
margin-left: 100px;
}
}
.download-button {
width: 100%;
height: 40px;
line-height: 40px;
left: 0;
bottom: -16px;
}
.share-bbb {
margin-top: 50px;
}
}
</style>
如何生成二维码
// 生成二维码
creatQrCode(inviteLink) {
let div = document.createElement('div');
let qrCode = new QRCode(div, {
text: inviteLink,//
width: 132,
height: 132,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let {_elImage} = qrCode._oDrawing;
_elImage.addEventListener('load', () => {
this.qrCode = _elImage;
});
},