[uni-app] 海报图片分享方案 -canvas绘制

分享海报图片的方式,以前再RN端采用的是截图方案, 我记得组件好像是

react-native-view-shot

现在要处理uni-app的海报图片分享, 一般也有 html2canvas的相关插件

不过其缺点也有,
比如说遇到bug,有时候没办法修改什么的
手绘canvas虽然麻烦,但是胜在自由灵活

canvas使用记录

先看下实际效果图

绘制流程及思路

CanvasContext文档

其实使用下来发现, canvas绘制和iOS原生开发进行UI绘制有很多相似之处, 比如draw的入参 ,都需要x,y坐标,设置width/height等

整个canvas绘制的思路如下

0.绘制整个大矩形背景 : 通过uni.downloadFile下载网络图片来获取tempFilePath, 结合几个坐标和宽高参数, 就可以绘制了

1. 绘制头像, 通过drawImage来绘制

不过这里需要注意的是, 如果要对头像图片进行裁剪,比如圆心之类的
需要用到clip的情况下,
需要提前保存好上下文画布

		// 2.顶部头像
				ctx.save(); // 先保存之前的画布
				ctx.beginPath()
				ctx.arc((200 + 190 / 2) * scaleNum, (60 + 190 / 2) * scaleNum, 190 / 2 * scaleNum, 0,
					Math.PI * 2)
				ctx.clip()
				ctx.drawImage(this.headUrl, 200 * scaleNum, 60 * scaleNum, 190 * scaleNum, 190 *
					scaleNum)

(200: 左边间距)
(190: 圆的直径)
(60: top的间距)
(这里需要注意的事, 圆的圆心坐标, 是相对于x/y坐标的哦 )

2.绘制文字部分

这个没有太大的问题, 不过要注意下 textAlign的具体用法

具体代码

1. html部分

			<canvas :style="{width: boxDetail.width +'px', height: boxDetail.height + 'px' }"
				id="sharePic" canvas-id="sharePic"></canvas>

2.js部分

	setCanvasSize() {
   
				const query = uni.createSelectorQuery().in(this);
				query.select('#content').boundingClientRect(data => {
   
					this.boxDetail.width = data.width
					this.boxDetail.height = data.height
					console.log(this.boxDetail, data)
					this.$nextTick(() => {
   
						setTimeout(() => {
   
							console.log('create and set canvas')
							this.createCanvas()
							// this.asyncAwaitCanvas()
						},<