uniapp用canvas实现分享海报

做app时通常会遇到分享海报的需求，将当前页面的海报保存到本地相册，然后就可以分享。重点是将当前页面的某一块作为海报页面保存到本地。

这是是通过canvas画图来解决的，参考官网将canvas转换为图片的方法

https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath?id=canvastotempfilepath

首先将需要的海报用canvas画出来，这里就比较繁琐，定位定点要准确，如果UI设计图精准的话就要方便一些。

1.因为canvas绘图是需要一些时间的，所以添加了loading至绘图完成，以防用户点进去界面空白；

2.适配机型是通过getSystemInfo方法来取得屏幕宽度来除以设计稿的宽度得出的比例，只需要在每个数字乘以这个比例即可实现自适应；

3.用canvasToTempFilePath方法将绘制的canvas图转换为图片，这个方法在以上也解释过了，并且贴出官网链接，可自行了解；

4.这里使用的定时器延迟一些时间再调用方法转换图片，主要是防止canvas未绘制完成就转换为空白图片；

5.注意：h5端转换后生成的图片是base64格式，app端是一个临时路径(如果要回显在界面中，最好是用 image 标签，img标签有时显示不出来)

        capture() {
				uni.showLoading({
					title: '加载中...'
				})
				let _this = this;
				let Width, Height;
				// 获取屏幕宽高
				uni.getSystemInfo({
					success(res) {
						Width = res.screenWidth;
						Height = res.screenHeight;
					},
					fail(err) {
						console.log(err)
					}
				});
				let wid = Width / 375;
				let marginLeft = wid * 32;
				let conMarginLeft = wid * 20;
				const ctx = uni.createCanvasContext('myCanvas', _this);
				ctx.drawImage('https://bwy.obs.myhuaweicloud.com/bwyapp/img/tk_yqhy_icon_hb.png', 0, 0, wid * 320, wid *
					414);
				// 内容
				ctx.setFontSize(wid * 14)
				ctx.setFillStyle('#fff');
				ctx.fillText('累计', wid * 40, wid * 115, wid * 80)
				ctx.setFontSize(wid * 17)
				ctx.setFillStyle('#FED917');
				ctx.fillText('1553', wid * 70, wid * 117, wid * 120)
				ctx.setFontSize(wid * 14)
				ctx.setFillStyle('#fff');
				ctx.fillText('人 ,', wid * 115, wid * 115, wid * 80)
				ctx.fillText('共获得', wid * 145, wid * 115, wid * 200)
				ctx.setFontSize(wid * 17)
				ctx.setFillStyle('#FED917');
				ctx.fillText('132185', wid * 190, wid * 117, wid * 200)
				ctx.setFillStyle('#fff');
				ctx.fillText('U', wid * 252, wid * 117, wid * 250)
				// 邀请码
				ctx.setFontSize(wid * 32)
				ctx.setFillStyle('#2AD3B1');
				ctx.fillText(this.inviteCode, wid * 165, wid * 370, wid * 300)
				ctx.draw(false, (() => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							destWidth: 400,
							destHeight: 600,
							quality: 1,
							fileType: 'png',
							success: (res) => {
								_this.base64Img = res.tempFilePath;
								console.log(_this.base64Img)
							},
							fail(err) {
								console.log(err)
							},
							complete(val) {
								uni.hideLoading();
							},
						}, _this);
					}, 2000)
				})())
			},

绘图完成之后需要将图片下载下来，这里提供了app端和h5端的下载图片方式，拿到图片链接即可。

           downloadImg() {
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.base64Img,
					success: function() {
						uni.showToast({
							title: '下载成功！',
							icon: 'none'
						})
					},
					fail(err) {
						uni.showToast({
							title: '下载失败，请稍后再试！',
							icon: 'none'
						})
						console.log(err)
					},
				});
				// #endif
				// #ifdef H5
				var oA = document.createElement('a');
				oA.download = 'share';
				oA.href = this.base64Img;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
				// #endif
			},

补充：在界面中要在canvas标签加上canvas-id，否则canvas显示不出来

<canvas canvas-id="myCanvas" />

踩坑：

如果canvas要绘制在弹框中，父级元素一定要设置宽高，否则显示不出来！！！！！

uniapp用canvas实现分享海报

猜你喜欢