前端canvas生成海报

话不多说直接上代码

<div class="saveImgs">
			<img src="" ref="codeEnd" style="width: 100%;height: 100%;" alt="">
			<img src="../../static/image/my_codeBg2.jpg" style="width: 750px;" ref="codeBg" alt="">
			//(这是背景图)
			<img :src="imgSrc" style="width: 170px;height: 170px;" ref="codeLogo" alt="">
			//(这是接上一篇生成的二维码图片)
			<span ref="headname">文字内容</span>
</div>
<div class="gzhBtn"><button type="primary" @click="saveImage">查看海报</button></div>

saveImage() {
			this.$vux.loading.show();
			let codeLogo = this.$refs.codeLogo;
			let codeBg = this.$refs.codeBg;
			let headname = this.$refs.headname;
			var canvas = document.createElement('canvas');
			let minW = codeLogo.offsetWidth;
			let minH = codeLogo.offsetHeight;
			let maxW = codeBg.offsetWidth;
			let maxH = codeBg.offsetHeight;
			canvas.width = maxW;
			canvas.height = maxH;
			var context = canvas.getContext('2d');
			context.drawImage(codeBg, 0, 0, maxW, maxH, 0,0, maxW, maxH);
			context.drawImage(codeLogo, this.bgx, this.bgy, minW, minH);
			context.font='bold 42px Adobe Ming Std' //需要加粗的话前面加bold
			this.loginInfo.user_name=this.loginInfo.user_name.substring(0,7);
			context.textAlign = 'center';//这是以横坐标为参考线为参考线来使参考线在文字的正中间
			context.fillText(文字内容,380,835);
			let hbimg = canvas.toDataURL('image/png');
			this.$api.storage('hbimg',hbimg);//最终合成的图片
			this.$vux.loading.hide();
			uni.navigateTo({
				url: '/pages/getimg/getimg'
			})