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

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

<template>
	<view>
		<canvas class="can" canvas-id="firstCanvas" ></canvas>
	</view>
</template>
<script>
	export default{
		onLoad() {
			var that = this
			that.toDrawCanvas()
		}	,
		methods:{
			//绘制canvas
			toDrawCanvas() {
				let that=this
				let ctx = uni.createCanvasContext('firstCanvas',this)//后来又做了一个分享的项目，发现不加this就不能用
				//uni.upx2px()是尺寸单位转换方法，622为rpx单位，换成px为311，根据设计稿来编辑
				let canvaWidth=uni.upx2px(622)	
				let canvaHight=uni.upx2px(984)
				//绘制文字居中对齐使用，根据我的理解，这个数值是要为需要截图区域宽度的一半
				let centerCode=uni.upx2px(311)	
				let xx=uni.upx2px(64)
				let yy=uni.upx2px(48)
				let font=uni.upx2px(32)//字体大小
				let yzmtop=uni.upx2px(130)
				let yzmleft=uni.upx2px(232)
				let imgurl='../../static/img/my/yqm.png'//设置背景图的路径
				ctx.drawImage(imgurl,0,0,canvaWidth,canvaHight)
				//绘制您的邀请码文字
				ctx.setFillStyle('#333333')//文字颜色
				ctx.setFontSize(font)
				ctx.textAlign="center"//居中，而且这个需要放在ctx.setFontSize()后面，其他api就没去一一使用过
				//绘制文字ctx.fillText(需要绘制的文字,x轴距离,y轴距离);
				ctx.fillText("您的邀请码",centerCode,yzmtop);
				//绘制邀请码文字
				let yqmwenzix=uni.upx2px(311)
				let yqmwenziy=uni.upx2px(227)
				let yamcodes=“邀请码”//这个是放邀请码
				ctx.setFillStyle('#fff')
				ctx.setFontSize(font)
				ctx.textAlign="center"
				ctx.fillText(yamcodes,yqmwenzix,yqmwenziy);
				//绘制复制邀请码
				let copyMx=uni.upx2px(310)
				let copyFont=uni.upx2px(28)
				ctx.setFillStyle('#EEB826')
				ctx.setFontSize(copyFont)
				ctx.textAlign="center"
				ctx.fillText("复制邀请码",yqmwenzix,copyMx);
				//绘制二维码位置
				let erweimaimg='../../static/img/my/appload.png'
				let towCodeX=uni.upx2px(172)
				let towCodeY=uni.upx2px(436)
				let towCodeW=uni.upx2px(280)
				ctx.drawImage(erweimaimg,towCodeX,towCodeY,towCodeW,towCodeW)
				//绘制扫码下载APP文字
				let apploady=uni.upx2px(790)
				ctx.setFillStyle('#333333')
				ctx.setFontSize(font)
				ctx.textAlign="center"
				ctx.fillText("扫码下载APP",yqmwenzix,apploady);
				//绘制分享好友文字
				let shareY=uni.upx2px(890)
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(font)
				ctx.textAlign="center"
				ctx.fillText("分享好友",yqmwenzix,shareY);
				ctx.draw()//结束绘画
			}
		}
	}
</script>

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

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，准备下班。

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