uniApp用canvas实现小程序保存分享页面&二维码到本地相册

之前分享了一篇 uniApp实现微信分享页面/二维码功能，但是小程序端似乎没法实现直接分享图片，看了蛮多教程基本都是保存分享页面到本地相册的，然后分享是用户主动分享。所以这里继上次APP分享微信这里再兼容下小程序端的分享（即保存分享页面到本地）。

//前端页面设置一个画布，并隐藏起来
<canvas canvas-id="myCanvas" :style="'width:'+windowWidth+'px;height:'+windowHeight+'px;position:absolute;op:-9999px;left:-9999px;'"/>

//分享按钮的兼容方法
shareWeiXin(scene){
	//#ifdef MP
	// console.log("小程序端")
	this.saveImage()
	//#endif
	
	//#ifdef APP-PLUS
	let _this = this
	let sc = scene
	_this.capture(sc)
	//#endif
},
//小程序端保存图片
saveImage(){
	// console.log("ok")
	uni.showLoading({
		title: '图片绘制中...',
	})
	var url = '../../../../static/fxbg2.jpg'
	
	//开始绘制图片，这边主要就是canvas写法了，uniapp官方：https://uniapp.dcloud.io/api/ui/canvas?id=%E5%9C%A8canvas%E4%B8%8A%E7%94%BB%E5%9B%BE
	const context = uni.createCanvasContext('myCanvas')
	context.drawImage(url,0, 0, this.windowWidth, this.windowHeight)
	context.drawImage(this.src,this.windowWidth/2-95/2, this.windowHeight/2,95,95)
	context.drawImage("../../../../static/fxb1.jpg",(this.windowWidth-251)/2,7*(this.windowHeight/8),78,24)
	context.drawImage("../../../../static/fxb2.jpg",(this.windowWidth-251)/2+88,7*(this.windowHeight/8),78,24)
	context.setFontSize(14)
	context.setFillStyle("#FEEDBB")
	context.fillText('邀请码：'+this.invitation,(this.windowWidth-251)/2+88+88,7*(this.windowHeight/8)+16)
	
	//重点：这边本来保存图片是写在draw之后，但第一次保存时空白，第二次才生效，写在draw回调里面就OK了。
	context.draw(false,function(){
		uni.canvasToTempFilePath({
			canvasId:'myCanvas',
			success: function(res){
				uni.hideLoading()
				// console.log(res.tempFilePath)
				uni.saveImageToPhotosAlbum({
					filePath:res.tempFilePath,
					success : function(res){
						uni.showToast({title : '图片已保存'})
					}
				})
			}
		})
		
	})
},