Uniapp 制作海报功能

<template>
	<view>
		<canvas class="can" canvas-id="mycan"></canvas>
		<button @click="but">保存海报</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backurl: '../../static/2bcd944a40e85a34f2e904f4461e163f.jpg' //本地背景图
			}
		},
		onShow: function(option) {
			var that = this
			// 邀请码接口请求
			uni.request({
				url: '******',
				data: {
					invite_code: *
				},
				header: {
					'content-type': '******'
				},
				method: 'POST',
				success: (e) => {
					// 获取当前系统的信息
					uni.getSystemInfo({
						success(res) {
							// 在画布绘制图像
							const ctx = uni.createCanvasContext('mycan')
							ctx.drawImage(that.backurl, 0, 0, res.windowWidth, res.windowHeight)
							ctx.drawImage(e.data, +res.windowWidth / 2 - 100, +res.windowHeight / 2 - 100, 200, 200)
							ctx.draw() //重绘页面
						}
					})
				}
			})
		},
		methods: {
			but() {
				var that = this
				// 获取用户的当前设置
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.showModal({
								title: '您还未授权相册权限',
								content: '点击确认授权',
								success(res) {
									if (res.confirm == true) {
										wx.authorize({
											scope: 'scope.writePhotosAlbum',
										})
									}
								}
							})
						} else {
							// 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
							uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: that.windowWidth * 1.22, // 截取的画布的宽
								height: that.windowHeight * 1.22, // 截取的画布的高
								destWidth: that.windowWidth * 1.22 * 3, // 保存成的画布宽度
								destHeight: that.windowHeight * 1.22 * 3, // 保存成的画布高度
								fileType: 'png', // 保存成的文件类型
								quality: 1, // 图片质量
								canvasId: 'mycan', // 画布ID
								success(res) {
									// 保存图片至相册
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success() {
											uni.showToast({
												title: '图片保存成功',
												duration: 2000
											})
										}
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.can {
		width: 100vw;
		height: 100vh;
	}
</style>