uniapp 微信小程序 纯代码动态生成海报分享朋友圈，需先保存图片_uniapp微信小程序页面生成图片

直接拷贝代码,不使用插件，自己纯代码实现。
从相册 或拍照 选择一个图片做海报背景。
大吉大利 今晚吃鸡。

<template>
	<view>
        
		<view style="margin-left: 20rpx;">
			<canvas canvas-id="posterCanvas" class="myCanvas"
				style="background-color: #FFFFFF;width:710rpx;height:100vh;"></canvas>
		</view>
         
		<view style="position: fixed;bottom: 90rpx;margin-left: 30rpx;">
			<button type="primary" @click="goto()">拍照</button>
		</view>
	</view>
</template>

<script>
	 
	export default {
		data() {
			return {
				src: ",
				erQured:"../../static/img/erweima.png",
				mzl:10,
				jqs:1,
				tqs:101,
			}
		},
		onLoad() { 
		},
		methods: {
			goto() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths[0]);
						console.log(this);
						this.src = res.tempFilePaths[0];
						console.log(this.src); 
						this.drawImage();
						this.getAlbum();
					}
				});
			},
			drawImage() {
				//微信小程序  画布宽带375
				var _that = this
				const ctx = uni.createCanvasContext("posterCanvas", this); 
				//背景色
				ctx.fillStyle = '#FFFFFF';
				ctx.fillRect(0, 0, 375 , 800 );
				// image
				ctx.drawImage(_that.src, 0 , 0 , 375 , 800 );
				ctx.save();
 
				ctx.globalAlpha = 0.5;
				ctx.fillStyle = '#000000';
				ctx.fillRect(10, 380, 90, 25);
				//商品名称
				ctx.setFillStyle("#fff");
				ctx.setFontSize(20); 
				ctx.fillText("进球数:"+_that.jqs, 10 , 400 );
				
				ctx.globalAlpha = 0.5;
				ctx.fillStyle = '#000000';
				ctx.fillRect(137, 380, 100, 25);
				//商品名称
				ctx.setFillStyle("#fff");
				ctx.setFontSize(20); 
				ctx.fillText("投球数:"+_that.tqs, 137 , 400 );
				
				ctx.globalAlpha = 0.5;
				ctx.fillStyle = '#000000';
				ctx.fillRect(260, 380, 110, 25);
				//商品价格
				ctx.setFillStyle("#fff");
				ctx.setFontSize(20 );
				// ctx.setTextAlign("bottom"); 
				ctx.fillText("命中率:"+_that.mzl+"%", 260 , 400); 
				ctx.globalAlpha = 1;
				//识别二维码访问
				ctx.fillText('长按识别二维码', 37 , 450 );
				ctx.drawImage(_that.erQured, 220 , 370 , 100 , 100 );
				ctx.save();
				ctx.draw()
				wx.hideLoading();
			},
			//获取画布，需要延时进行，否则获取到的画布为空 
			getCanves() {
				var _that = this
				setTimeout(() => {
					wx.canvasToTempFilePath({
						canvasId: 'posterCanvas',
						success: function(res) {
							_that.savePoster(res.tempFilePath)
						},
						fail: function(res) {
							console.log(res.errMsg)
						}
					}, this)
				}, 1000)
			},
			//将获取到的画布传值进行保存
			savePoster(shareImagePath) {
				var that = this
				setTimeout(() => {
					wx.saveImageToPhotosAlbum({
						filePath: shareImagePath,
						success(res) {
							wx.showToast({
								title: '保存成功',
								icon: 'none'
							})
							setTimeout(() => {
								wx.hideLoading()
								that.$emit('fatherMethod', false)
							}, 300)
						},
						fail() {
							wx.showToast({
								title: '保存失败，请刷新页面重试',
								icon: 'none'
							})
							setTimeout(() => {
								wx.hideLoading()
							}, 300)
						}
					})
				}, 500)
			},
			//在保存之前先判断用户是否授权
			getAlbum() {
				var that = this;
				wx.showLoading({
					title: '正在保存...',
					mask: true
				})
				wx.getSetting({
					success(res) {
						if (res.authSetting["scope.writePhotosAlbum"]) {
							that.getCanves();
						} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
							wx.authorize({
								scope: "scope.writePhotosAlbum",
								success() {
									that.getCanves();
								},
								fail() {
									wx.hideLoading();
									wx.showToast({
										title: "您没有授权，无法保存到相册",
										icon: "none"
									});
								}
							});
						} else {
							wx.openSetting({
								success(res) {
									if (res.authSetting["scope.writePhotosAlbum"]) {
										that.getCanves();
									} else {
										wx.showToast({
											title: "您没有授权，无法保存到相册",
											icon: "none"
										});
									}
								}
							});
						}
					},
					fail: err => {
						wx.hideLoading();
						wx.showToast({
							title: "出现了错误，请稍后再试",
							icon: "none"
						});
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: white;
	}
</style>

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191