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

绝地灬酷狼 2023-08-17 16:00 88阅读 0赞

最近做一个app，需要截取页面保存为图片，然后分享给好友。  
uni-app官网[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]  
那么进入正题  
首先是页面的ui图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
需要的白色区域截图并且保存图片发给好友。  
那么就要用到[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）不能使用，需要在模拟器上或者真机上使用

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

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

[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20230810/452375b27a0e4658b35ef19c31dd50f9.png
[canvas]: https://uniapp.dcloud.io/component/canvas
[drawImage]: https://uniapp.dcloud.io/api/canvas/CanvasContext?id=canvascontextdrawimage