uniapp 微信小程序 生成海报

uniapp 微信小程序 生成海报
注意，动态图片需要使用uni.getImageInfo获取一遍不然不显示。
缺点：渲染速度有点慢

<template>
	<view>
		<view class="pc-container">
			<canvas canvas-id="mycanvas" style="width: 300px;height: 450px;margin: 0 auto;"> </canvas>
		</view> 
		<view class="save">
			<view class="btn" @click="saveImage">
				<u-icon name="download" color="#ffffff" size="32" style="margin-right: 10rpx;"></u-icon>
				保存海报
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				nickname: '',
				imgurl: '',
				openClassId: '',
				detail: {},
				showCanvas: true,
				imglist: {
					heardImg: '',
					coverIcon: '',
					weChatImg: '',
				}
			};
		},
		onLoad: function(options) {
			let openClassId = options.openClassId
			this.openClassId = openClassId
		},
		onReady: function() {},
		onShow: function() {
			this.getDetail()
		},
		onHide: function() {},
		onHide: function() {
			uni.removeStorageSync('person-card');
		},
		methods: {
			// 获取公开课详情
			getDetail() {
				let user = uni.getStorageSync('user')
				if (this.shareType == 'share' && user == '') {
					this.shareShow = true
				}
				app.globalData.api.openClassDetail({
					"id": this.openClassId
				}).then(res => {
					if (res.coverIcon == "") {
						res.coverIcon = '/static/image/img.png'
					}
					this.detail = res
					this.getSceneCode()
				});
			},
			getSceneCode() {
				let user = uni.getStorageSync('user')
				let arr = {
					uid: user.uid,
					openClassId: this.openClassId
				}
				app.globalData.api.sceneCreate({
					"uid": user.uid,
					"bizData": JSON.stringify(arr),
					"sceneType": 1
				}).then(res => {
					let data = res.sceneCode
					this.getWEchart(data)
				});
			},
			//这里是为了生成小程序二维码
			getWEchart(scene) {
				app.globalData.api.getQrcode({
					scene: scene,
					page: 'packageA/pages/subscribe/subscribe'
				}).then(res => {
					let user = uni.getStorageSync('userInfo').userInfo
					let headerPath = user.headerPath
					this.nickname = user.nickname
					
					let imglist = {
						heardImg: headerPath,
						coverIcon: this.detail.coverIcon,
						weChatImg: res
					}
					this.imglist = imglist
					this.canvasImage()
				});
			},
		// 这里是为了绘制海报
			canvasImage() {
				let that = this
				uni.getImageInfo({
					src: that.imglist.heardImg,
					success(res1) {

						let myCanvas = uni.createCanvasContext('mycanvas', this);
						myCanvas.fillStyle = "#2388FD"
						myCanvas.fillRect(0, 0, 300, 450)

						// 头像
						myCanvas.drawImage(res1.path, 20, 20, 55, 55);
						uni.getImageInfo({
							src: that.imglist.coverIcon,
							success(res2) {
								// 背景产品图
								myCanvas.drawImage('/static/image/bg.jpg', 20, 90, 260, 340);
								myCanvas.drawImage(res2.path, 30, 100, 240, 120);
								uni.getImageInfo({
									src: that.imglist.weChatImg,
									success(res3) {
										// 二维码
										myCanvas.drawImage('/static/image/er.png', 60, 355, 140,
											70);
										myCanvas.drawImage(res3.path, 180, 360, 60, 60);
										//参数：图片，左偏移，上偏移，宽，高
										myCanvas.fillStyle = "#FFFFFF"
										myCanvas.font = `14px Arial `;
										myCanvas.fillText(that.nickname, 95, 45);
										myCanvas.fillText(`向你推荐了`, 95, 65);
										myCanvas.fillStyle = "#000000";
										myCanvas.font = `14px Arial `;
										myCanvas.fillText(that.detail.openClassName.slice(0, 19),
											30, 240, 260, 100);
										myCanvas.fillText(that.detail.openClassName.slice(19, that
												.detail.openClassName.length),
											30, 260, 260, 100);

										// myCanvas.fillText('直播课程直播 ', 30, 260, 260, 100);
										myCanvas.font = `12px Arial `;
										myCanvas.fillText('直播时间：' + that.detail.onlineLiveRoom
											.startTime, 30, 280, 260, 100);
										let num = that.detail.meetNum || 0
										myCanvas.fillText('已有' + num + "人预约", 30, 300, 200, 100);

										//开始绘画，必须调用这一步，才会把之前的一些操作实施
										myCanvas.draw(true, () => {
											uni.canvasToTempFilePath({
												canvasId: 'mycanvas',
												fileType: 'jpg',
												// 在H5平台下，tempFilePath 为 base64 
												success: (res) => {
													uni.getImageInfo({
														src: res.tempFilePath,
													    success: function (res) {
													        that.imgurl = res.path
													    }
													});
												},
												fail: () => {
													uni.showToast({
														title: '名片加载失败',
														duration: 2000
													});
												}
											});
										})
									},
									fail(res) {
										console.log("fail3", res)
									}
								})
							},
							fail(res) {
								console.log("fail2", res)
							}
						})
					},
					fail(res) {
						console.log("fail1", res)
					}
				})
			},
 // 这里是为了保存海报到相册
			saveImage() {
				let that = this;
				uni.showActionSheet({
					itemList: ['保存图片'],
					success: (res) => {
						if (res.tapIndex == 0) {
							uni.saveImageToPhotosAlbum({
								filePath: that.imgurl, //    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
								success: () => {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									});
								}
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.pc-container {
		width: 300px;
		height: 450px;
		margin: 0 auto;
		margin-top: 46rpx;
		overflow: hidden;
		box-shadow: 0px 6px 12px rgba(22, 26, 31, 0.1);
		border-radius: 20px;

		image {
			margin: 0 auto;
			width: 300px;
			height: 450px;
			display: block;
		}

	}

	.save {
		width: 280px;
		text-align: center;
		margin: 0rpx auto;
		background: #2388FD;
		opacity: 1;
		border-radius: 20px;
		margin-top: 30rpx;

		.btn {
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 1;
		}
	}
</style>