uni-app用canvas截屏并且分享好友

最近做一个app，需要截取页面保存为图片，然后分享给好友。
uni-app官网https://uniapp.dcloud.io/
那么进入正题
首先是页面的ui图
需要的白色区域截图并且保存图片发给好友。
那么就要用到canvas进行画图，图片的话可以使用drawImage设置背景图
第一步，创建画布

这样到这边，ui图就实现出来了。
第二步，把当前画布指定区域的内容导出生成指定大小的图片，并且分享好友
在此说一个api问题，如果在浏览器调试，并且报错API share is not yet implemented，这个是说改share（uni-app的分享api）在浏览器（h5）不能使用，需要在模拟器上或者真机上使用

export default{
	methods:{
		//绘制canvas
		toDrawCanvas() {.......},
		//分享点击
		appShare() {
			let that = this
			uni.canvasToTempFilePath({
				canvasId: 'firstCanvas',
				success: (res) => {
					//返回文件路径
					that.imageUrl=res.tempFilePath
					//保存图片到系统相册
					uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '保存名片码失败'
								})
							}
						})
					//unii-app分享,我在这里是微信分享好友
					uni.share({
						    provider: "weixin",
						    scene: "WXSceneSession",
						    type: 2,
						    imageUrl: res.tempFilePath,
						    success: function (res) {
								console.log(res);
						    },
						    fail: function (err) {
						        console.log("fail:" + JSON.stringify(err));
						    }
						});
				}
			})
		}
	}
}

到此就结束了。
关于分享好友这个点击事件，用canvas绘画出来没有点击事件，只能自己在position: fixed;定位到相对的位置。

OK，准备下班。

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！