微信小程序生成海报并保存在本地（组件开发）

1、将商品图片和二维码生成海报在屏幕中间

子组件代码

<template>
	<view>
		<div class="poster">
			<div class="posterBox">
				<div class="posterCard">
					<canvas canvas-id="posterCanvas" class="myCanvas"
						style="background-color: #FFFFFF;width:660rpx;height:920rpx;"></canvas>
				</div>
				<view class="poserBtn" @click="getAlbum">
					保存至相册
				</view>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props:{
			isshow:{
				type: Boolean
			},
			//商品图片
			pic: {
				type: String,
				default: function() {
					return ''
				}
			},
			// 商品名称
			prodName: {
				type: String,
				default: function() {
					return ''
				}
			},
			// 商品金额
			price: {
				type: String,
				default: function() {
					return 0
				}
			},
			// 二维码图片
			erQured: {
				type: String,
				default: function() {
					return '/images/08d31f6bda294b91a5ce568f4006f563.png'
				}
			},
		},
		data() {
			return {
				imgPic: "",
				value:'1'
			}
		},
		onLoad() {
			
		},
		created() {
			this.getShare()
			uni.showLoading({
				title: "专属海报来啦...",
				mask: true
			});
		},
		methods: {
			closePopup(){
				console.log('ooo');
				let _that = this
				_that.$emit('fatherMethod',false)
			},
			getShare() {
				var _this = this;
				uni.downloadFile({
					url: this.pic,
					success: function(res) {
						console.log(res)
						_this.imgPic = res.tempFilePath;
						console.log(_this.imgPic)
						_this.drawImage()
					}
				})
			},
			drawImage() {
				var _that = this
				const InfoSync = uni.getSystemInfoSync();
				let bili = InfoSync.windowWidth / 375 * 1;
				const ctx = uni.createCanvasContext("posterCanvas", this);

				//背景色
				ctx.fillStyle = '#FFFFFF';
				ctx.fillRect(0, 0, 330 * bili, 500 * bili);
				// image
				ctx.drawImage(_that.imgPic, 25 * bili, 10 * bili, 280 * bili, 280 * bili);
				ctx.save();
				//商品价格
				ctx.setFillStyle("#333333");
				ctx.setFontSize(26 * bili);
				// ctx.setTextAlign("bottom");
				ctx.fillText(_that.price, 37 * bili, 325 * bili);
				//商品名称
				ctx.setFillStyle("#333333");
				ctx.setFontSize(14 * bili);
				ctx.fillText(_that.prodName, 37 * bili, 360 * bili);
				//识别二维码访问
				ctx.fillText('长按识别二维码访问' , 37 * bili, 400 * bili);
				ctx.drawImage(_that.erQured, 220 * bili, 370 * bili, 80 * bili, 80 * bili);
				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="scss">
	.poster {
		height: 50vh;
		.closePopup{
			width: 30rpx;
			height: 30rpx;
			position: fixed;
			right: 40rpx;
			top: 260rpx;
		}
		.posterBox {
			padding-top: 30rpx;
			.posterCard {
				width: 660rpx;
				height: 900rpx;
				margin: 0 auto;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 8px 0px rgba(10, 2, 4, 0.04);
			}

			.poserBtn {
				width: 630rpx;
				height: 80rpx;
				background-color: #D32B20;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 100rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>

 

<!-- 生成海报 start -->
		<u-popup v-if="isshow" :show="isshow" @close="close('isshow')" >
			<view class="poster">
				<canvas-paint :pic='info.pic' :erQured='codeImg' :prodName='info.prodName' :price='price'
					@fatherMethod="clickMe">
				</canvas-paint>
			</view>
		</u-popup>

  

 import canvas '@/component/canvas'