uni-app 實現分享生成圖片

<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">圖片已保存到相冊，可分享給好友</view>
			<image src="../../static/error.png" class="errorImage" @click="canvasShow = false"></image>
		</view>
</view>
</template>

<script>
export default {
  data() {
    return {
			canvasShow: false
    }
  },
  methods: {
		//這是一個封裝好的方法  
		promisify: api => {
			return (options, ...params) => {
				return new Promise((resolve, reject) => {
					const extras = {
						success: resolve,
						fail: reject
					}
					api({ ...options, ...extras }, ...params)
				})
			}
		},
		shareClick() {			
			const wxGetImageInfo = this.promisify(uni.getImageInfo)
			Promise.all([
					// 圖片目前只隨機找了幾張圖片，後期可自行替換
					wxGetImageInfo({
							src: 'http://pics.ksudi.com/pic/2019/soms/companycard/jd2.png'   // 背景圖片
					}),
					wxGetImageInfo({
							src: 'http://pics.ksudi.com/pic/2019/soms/companycard/st2.png'   // 二維碼圖片，二維碼圖片如須要攜帶參數，可根據接口將須要掃碼進入頁面的路徑+參數傳入後端，後端可根據生產小程序二維碼路徑，將路徑放入這裏就ok了,可參考
					})
			]).then(res => {
					console.log(3454)
					const ctx = wx.createCanvasContext('shareCanvas')
					console.log(ctx)
					// 底圖
					ctx.drawImage(res[0].path, 0, 0, 600, 700)
					// 做者名稱
					ctx.setTextAlign('center')    // 文字居中
					ctx.setFillStyle('#000000')  // 文字顏色：黑色
					ctx.setFontSize(22)         // 文字字號：22px
					ctx.fillText('做者：張傑', 300 / 2, 100)
					// 小程序碼
					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>