uni-app 开发微信小程序 海报分享 canvas画base64编码的图片，开发者工具能展示手机端不能展示处理

微信小程序海报分享

1. 先从实现一个canvas绘制一张简单的图到可以保存到相册

上代码可以直接复制

<template>
	<view class="posterBg">
		<canvas canvas-id="poster" id="poster" class="poster-box"></canvas>
		<u-popup v-model="show" mode="center">
			<image :src="posterImg" class="posterImg"></image>
		</u-popup>
		<view class="button" @click="saveposter">保存到相册</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			_w:0,
			bgImgUrl: 'https://yuanzai-zhjk.oss-accelerate.aliyuncs.com/health/uploads/20231129/e9e0eedfb12ff4da5af5d13125510d83.png', //海报背景
			show: false,
			posterImg: '',
		};
	},
	async onReady() {
		this.getSystemInfo(); //获取屏幕宽度适配比例
	},
	onLoad: function(option) {
	},
	onShow() {
	
	},
	mounted() {
		this.showposter();
	},
	methods: {
		//将canvas转图片
		async showposter() {
			uni.showLoading({
				title: '海报生成中...'
			});
			//  绘制海报所需数据    如果是本地图片使用this.getImageInfoUrl
			let bgImgUrl = await this.createImgUrl(this.bgImgUrl);
			this.posterCanvas({
				bgImgUrl
			});
		},
		//保存图片
		saveposter() {
			const that = this;
			uni.getImageInfo({
				src: this.posterImg,
				success: res => {
					console.log('res', res.path);
					uni.saveImageToPhotosAlbum({
						filePath: res.path,
						success: function() {
							uni.showToast({
								title: '保存成功'
							});
						},
						fail: function(err) {
							console.log('err1', err);
						}
					});
				},
				fail: err => {
					console.log('errr', err);
				}
			});
		},
		// 绘制海报
		posterCanvas({ bgImgUrl = ''}) {
			let that = this;
			let ctx = uni.createCanvasContext('poster', this);
			//背景图
			ctx.drawImage(bgImgUrl, 0, 0, this.calculate(310), this.calculate(500));
			ctx.restore();
			ctx.draw();
			// 海报绘制完成
			// 转换成图片
			setTimeout(() => {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.calculate(310),
					height: that.calculate(494.5),
					// destWidth: this.calculate(930),
					// destHeight: this.calculate(1483.5),
					quality: 1,
					canvasId: 'poster',
					success: res => {
						// console.log(res.tempFilePath, '生成图片');
						that.posterImg = res.tempFilePath;

						uni.hideLoading();

						that.show = true;
					},
					fail: err => {
						// console.log('err', err);
						uni.showToast({
							title: '生成失败',
							icon: 'none'
						});
						uni.hideLoading();
					}
				});
			}, 1000);
		},

		// 获取系统适配
		getSystemInfo() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this._w = res.windowWidth;
				}
			});
		},
		// 画布计算比例
		calculate(num) {
			let w = this._w;
			let n = parseInt((w * num) / 375);
			return n;
		},
		// 创建本地地址
		createImgUrl: url =>
			new Promise((resolve, reject) => {
				// console.log(url)
				uni.downloadFile({
					url,
					success: val => {
						// console.log('创建本地地址',val)
						resolve(val.tempFilePath)
					},
					fail: err => {
						// console.log('e', err);
						uni.showToast({
							title: '图片出现错误',
							icon: 'none'
						});
						reject(err);
					}
				});
			}),
		// 本地资源路径
		getImageInfoUrl: url =>
			new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: url,
					success: val => resolve(val.path),
					fail: err => {
						// console.log('e', err);
						reject(err);
					}
				});
			}),
	}
};
</script>

<style lang="scss" scoped>
.posterBg{
	text-align: center;
	padding-top: 40rpx;
}
.poster-box {
	width: 620rpx;
	height: 989rpx;
	position: fixed;
	left: 110vw;
	top: 0rpx;
	z-index: -1;
}

.posterImg {
	width: 620rpx;
	height: 989rpx;
	border-radius: 20rpx;
	box-shadow: 0px 5px 10px #888888;
}

.button {
	width: 400rpx;
	height: 88rpx;
	line-height: 88rpx;
	margin: 0 auto;
	text-align: center;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #262a32;
	background: #ffffff;
	border-radius: 16rpx;
	margin-top: 48rpx;
	background: #1887FB;
	color: #fff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
}
</style>

效果

场景 做一个分享海报 海报上需要又个人的分享码，分享码带个人的id

1. 之前写过如何生成自己的带id的分享码（如何生成自己的小程序二维码）
   现在需要做的是把一张图片和分享码组成一张海报，可以保存到相册。
2. 遇到的问题 犹豫生成的二维码是base64编码，而在微信开发工具中使，是可以展示在画布上的，可是到了手机端调试时，发现base64是不能展示在画布上的

<canvas canvas-id="poster" id="poster" class="poster-box"></canvas>

let ctx = uni.createCanvasContext('poster', this);
ctx.drawImage(base64,0,0); // 在微信开发者工具里 是可以看到图片出来的  但是手机上不行

这时候就需要先把base64编码临时存储并生成一个临时的路径url，再用临时的路径去渲染图片