uni-app generated images to achieve Share

<template>
<view>
    <view class="personal_li"
			      @click="shareClick">
			  <image src="../../static/address.png"
			         mode="widthFix"
			         class="iconImage"></image>
			  <text class="font14">分享生成图片</text>
			  <image src="../../static/jt.png"
			         mode="widthFix"
			         class="jtIcon"></image>
			</view>
		<view class="canvasContent" v-if="canvasShow">
			<canvas canvas-id="shareCanvas" class="canvasName"></canvas>
			<view class="canvasText "> images saved to the album, you can share with friends </ View> 
</ View>
		</ View>
			<Image src =" ../../ static / error.png "class =" errorImage "@ the Click =" canvasShow = false "> </ Image>
</ Template> 

<Script> 
Export default { 
  Data () { 
    return { 
			canvasShow: to false 
    } 
  }, 
  Methods: { 
		// This is a good method of packaging   
		promisify: API => { 
			return (Options, the params ...) = > { 
				return new new Promise ((Resolve, Reject) => { 
					const = {Extras 
						Success: Resolve, 
						Fail: Reject 
					} 
					API ({... Options, Extras ...}, ... the params) 
				}) 
			} 
		}, 
		shareClick () {			 
			const wxGetImageInfo = this.promisify (uni.getImageInfo) 
			Promise.all ([ 
					// random picture currently only looking for a few pictures, the latter can be replaced by self- 
					wxGetImageInfo ({
							src: 'http://pics.ksudi.com/pic/2019/soms/companycard/jd2.png' // background picture 
					}), 
					wxGetImageInfo ({ 
							the src: 'http://pics.ksudi.com/pic/ 2019 / soms / companycard / st2.png ' // dimensional code image, such as the need to carry two-dimensional code image parameters, the parameters can be passed in the rear end of the path + interface code into the page needs to be scanned, according to the production of small rear end program dimensional code path, into the path here on ok 
					}) 
			]). the then (RES => { 
					the console.log (3454) 
					const wx.createCanvasContext CTX = ( 'shareCanvas') 
					the console.log (CTX) 
					// base map 
					ctx.drawImage (RES [0] .path, 0, 0, 600, 700) 
					// author name 
					ctx.setTextAlign ( 'center') // this text is center 
					ctx.setFillStyle ( '# 000000') // text color : black 
					ctx.setFontSize (22) // text size: 22px 
					ctx.fillText ( 'author: Zhang Jie', 300/2,100)setFontSize (22) // text size: 22px 
					// applet code 
					const qrImgSize = 150
					ctx.drawImage(res[1].path, (340 - qrImgSize) / 2, 230, qrImgSize, qrImgSize)
					ctx.stroke()
					// 绘图生成临时图片
					console.log('res', res)
					ctx.draw(false,() => {
						this.tempFileImage()
					})
					this.canvasShow = true
			})
		},
		tempFileImage() {
			let that = this
			uni.canvasToTempFilePath({
					canvasId: 'shareCanvas',
					success: (res) => {
							uni.hideLoading()
							that.savePic(res.tempFilePath)
					},
					fail:function () {
							//TODO
					}
			})
		},
		//保存
		savePic (filePath) {
			console.log('filePath', filePath)
			uni.showLoading({
					title: '正在保存'
			});
			uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: function () {
							uni.showToast({
									title: '图片保存成功～'
							});
					},
					fail: function (e) {
							//TODO
					},
					complete: function (){
							uni.hideLoading()
					}
			});
		}
  }
}
</script>
<style lang="scss" scoped>
	.canvasContent{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 50upx;

		.canvasName{
			width: 80%;
			height: calc(100vh - 300upx);
		}
		.canvasText{
			margin: 30upx 0 20upx;
			color: #FFFFFF;
		}
		.errorImage{
			width: 80upx;
			height: 80upx;
		}
	}
</style>