uniapp canvas画布 H5 小程序 图片文字合成一张图

<!-- 页面结构 -->
<template>
	<view style="width: 100%;display: flex;align-items: center;flex-direction: column;padding-bottom: 60rpx;">

		<!-- 画布 -->
		<view class="" style="border-radius: 20rpx;overflow: hidden;margin-top: 40rpx;">
			<canvas canvas-id="myCanvas" style="width: 690rpx;height: 1228rpx;"></canvas>
		</view>

		<view class="goImmedia" @click="baocun">
			<view class="goText">
				保存到相册
			</view>
		</view>


	</view>
</template>

微信小程序可以直接保存，H5需要预览保存 （我是将base64传给后台转换成线上链接进行预览的）

<script>
	export default {
		data() {
			return {
				show: false,
				text: '',
				ctx: '',
				img1Path: 'https:/****', // 图片背景路径
				// img2Path: 'http://*****', // 图片二维码路径
				basepath: '',
				base64path: '',
				num: 0
			};
		},
		onLoad(option) {
			console.log(option)
			this.text = option.name + '同学'
			this.num = this.text.length
		},
		mounted() {
			// 获取屏幕宽度比率
			this.powerW = uni.getSystemInfoSync().windowWidth / 375;
			// console.log(this.powerW, '宽度比率');

			// 创建画布 初始化canvas上下文
			this.ctx = uni.createCanvasContext('myCanvas');
			this.mergeImages();
		},
		methods: {
		
			// 点击-保存海报
			async exportPost() {
				// 调用合并图片的方法。
				// this.mergeImages();
			},

			// 合并图片的方法
			async mergeImages() {
				// this.show = true
				// 加载第一张图片到canvas上
				const image1 = await this.loadImage(this.img1Path);

				// 在(0,0)位置绘制图片1，图一宽高分别为345px和334px
				this.ctx.drawImage(image1, 0, 0, 345 * this.powerW, 614 * this.powerW);

				// 加载第二张图片到canvas上，并设置位置和大小（根据需要调整）
				// const image2 = await this.loadImage(this.img2Path);

				// 在(10,209)位置绘制图片2,图片二宽高75px，可以根据需要调整位置和大小
				// this.ctx.drawImage(image2, 10 * this.powerW, 209 * this.powerW, 75 * this.powerW, 75 * this.powerW);

				// 设置字体样式
				// this.ctx.font = '8px Arial';
				this.ctx.font = `${(30 * this.powerW).toFixed(0)}px Microsoft YaHei UI`;
				this.ctx.fillStyle = '#000'; // 设置填充颜色
				this.ctx.fontweight = 700;

				// 在 Canvas 上绘制文字
				// 第二个和第三个参数是文字的 x 和 y 坐标
				this.ctx.fillText(this.text, (345 - this.num * 30) / 2 * this.powerW, 320 * this.powerW);

				// 完成绘制并导出为图片（可选）
				this.ctx.draw(true, () => {
					const _this = this
					// 这里可以处理合并后的图片，比如保存到相册或上传到服务器等操作。
					// 如果需要导出为文件或上传等操作，可以使用uni.canvasToTempFilePath等方法。	
					uni.canvasToTempFilePath({ // res.tempFilePath临时路径
						canvasId: 'myCanvas',
						success: (res) => {
							console.log('临时路径=>', res.tempFilePath);
							_this.base64path = res.tempFilePath
							_this.getbase64(res.tempFilePath)

						
						}
					})
				});
			},
			//微信小程序直接保存
			baocun() {
				uni.saveImageToPhotosAlbum({ // 保存本地
					filePath: this.base64path,
					success: (response) => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						console.log(response, 'success');
					},
					fail: (response) => {
						console.log(response, 'error');
						uni.openSetting({ //打开权限
							success: (response) => {
								if (!response.authSetting[
										'scope.writePhotosAlbum'
									]) {
									uni.showToast({
										title: '获取权限成功, 再次点击即可保存',
										icon: none
									})
								} else {
									uni.showToast({
										title: '获取权限失败, 无法保存',
										icon: none
									})
								}
							}
						})
					}
				})
			},
			//转换base64
			getbase64(e) {
				const _this = this
				this.$request({
					url: '/share/base64',
					method: 'POST',
					data: {
						base64: e,
					},
				}).then(res => {
					console.log(res.data);
					_this.basepath = res.data.data.url
				})

			},

			preview() {
				console.log(this.basepath)
				//调用预览图片的方法
				uni.previewImage({
					urls: [this.basepath],
					current: 0, //点击图片传过来的下标
					success: (res) => {
						console.log('预览图片成功');
						
					}
				})
	

			},
	

			// 注：canvas绘图在开发者工具上支持base64图片，在真机上是不可以的, 
			// 需让后台返回图片网络链接通过getimageinfo方法获取临时路径再进行操作 
			loadImage(src) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: src, // 图片的URL或临时文件路径
						success: (res) => {
							console.log(res, 1.5);
							// 获取图片的本地路径或临时文件路径，用于在canvas上绘制。
							resolve(res.path);
						},
						fail: reject, // 处理加载失败的情况。
					});
				});
			},

		},
	};
</script>