[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)

1
2
3
4
5
6
7
8
9

(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>
1
2

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()
						}, 800)
					})
				}).exec();
			},
			/**
			 * @Description: 创建canvas画布
			 */
			async createCanvas() {
				this.context = uni.createCanvasContext('sharePic', this)
				const ctx = this.context;

				function drawCanvas(url, top) {
					if (url) {
						return new Promise((resolve, reject) => {
							let obj
							obj = { url }
							uni.downloadFile({
								url,
								success: (res) => {
									top ? resolve({ ...res, top }) : resolve({ ...res })
								},
								fail: (err) => {
									reject(err)
								}
							})
						})
					} else {
						return new Promise((resolve, reject) => {
							top ? resolve({ top }) : resolve()
						})
					}
				}
				const scaleNum = this.boxDetail.width / 590
				// 1.背景图
				// - 读背景图资源
				let res = await drawCanvas(
					"https://cdn.froglesson.com/static/cert/share_notes_content_bg.png");
				ctx.save();
				// - 绘制背景图路径/坐标/宽/高
				ctx.drawImage(res.tempFilePath, 0, 0, scaleNum * 590, scaleNum * 864)

				// 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)

				// 3.title
				ctx.restore() //恢复一下绘画板
				let title = this.returnName(this.shareData.user_name + ",已学习" + (this.shareData
						.count || 0) +
					"天")
				ctx.setFontSize(32 * scaleNum) //字体大小
				ctx.setFillStyle('#fff') //文字颜色
				ctx.setTextAlign('center') //文本左对其
				ctx.fillText(title, 590 / 2 * scaleNum, (280 + 30) * scaleNum, 530 *
					scaleNum); // marginleft:182rpx;maxWidth:374 最大宽度

				// 4.学习内容
				let content = "今天在「XXXXAPPXXXXX」" + (this.shareData.times > 30 ?
					`${this.shareData.times || 0}分钟` : "学习了")
				content = content + this.studyTitle() + this.studyCount();
				content = "我是中间文字部分,阿爸不不不不不不不不不,啊电话多好多好多好多好等哈,多撒MDJSLSJL"

				// - 字符拆分/计算行数
				let content_top = 0
				let contents = content.trim().split("")
				contents = contents.map((item, index) => {
					if (index && !(index % 20)) {
						item = item + '\n';
					}
					return item
				})
				// 逐行绘制标题文字
				contents.join("").split('\n').forEach((item, index) => {
					ctx.setFontSize(28 * scaleNum) //字体大小
					ctx.setFillStyle('#fff') //文字颜色
					ctx.setTextAlign('center') //文本左对其
					content_top = (365 + 30) * scaleNum + 48 * scaleNum * index //高度计算, 40是行高
					ctx.fillText(item, 590 / 2 * scaleNum, content_top, 530 *
						scaleNum); // marginleft:182rpx;maxWidth:148 最大宽度
				})

				// 5.时间
				let time = this.shareData.day
				ctx.setFontSize(24 * scaleNum) //字体大小
				ctx.setFillStyle('#fff') //文字颜色
				ctx.setTextAlign('center') //文本左对其
				ctx.fillText(time, 590 / 2 * scaleNum, (609 + 30) * scaleNum, 530 *
					scaleNum); // marginleft:182rpx;maxWidth:148 最大宽度

				// 6.icon 
				res = await drawCanvas("https://cdn.froglesson.com/static/cert/index_logo.png")
				ctx.drawImage(res.tempFilePath, 210 * scaleNum, (716 + 30) * scaleNum, 80 * scaleNum,
					80 * scaleNum)

				// 7.qrcode
				res = await drawCanvas(this.qrCode);
				ctx.drawImage(res.tempFilePath, 299 * scaleNum, (716 + 30) * scaleNum, 80 * scaleNum,
					80 * scaleNum)

				// 8.底部title
				let appName = "XXXXAPPNAMEXXXXXX"
				ctx.setFontSize(24 * scaleNum) //字体大小
				ctx.setFillStyle('#fff') //文字颜色
				ctx.setTextAlign('center') //文本左对其
				ctx.fillText(appName, 590 / 2 * scaleNum, (801 + 50) * scaleNum, 530 *
					scaleNum); // marginleft:182rpx;maxWidth:148 最大宽度




				// 完成绘制 - 执行保存
				ctx.draw()
				console.log('绘制完毕')
				uni.setStorageSync('openSaveShareImage', true)
				this.saveOver()
			},

			saveOver() {
				console.log("绘制----------end")
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'sharePic',
						destWidth: this.boxDetail.width * 2, //展示图片尺寸=画布尺寸1*像素比2
						destHeight: this.boxDetail.height * 2,
						quality: 1,
						fileType: 'png',
						success: (result) => {
							console.log(result.tempFilePath)
							uni.saveImageToPhotosAlbum({
								filePath: result.tempFilePath,
								success: function() {
									uni.hideToast()
									uni.showToast({
										icon: 'none',
										title: "图片已下载至【相册】，请打开【相册】查看", // res.tempFilePath
									});
								},
								fail: function() {
									uni.hideToast()

									uni.showToast({
										icon: 'none',
										title: "保存失败", // res.tempFilePath
									});
								}
							})
						},
					}, this);
				}, 1000)
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166