uniapp canvas 图片加上文字合成一张新图并保存到手机相册

本文链接：https://blog.csdn.net/qq_43513271/article/details/124292829

uniapp canvas 图片加上文字合成一张新图并保存到手机相册

在这里插入图片描述背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了

具体实现代码

<template>
	<view class="box">
		<view class="box-title">
			<view class="box-title_left">
				{{'金奖'}}
			</view>
			人员:
			<view class="box-title_right">
				{{5}}人
			</view>
		</view>
		<view class="box_center">
			<view class="indeximg">
				<canvas style="width: 96px;height: 96px; " canvas-id="firstCanvas"></canvas>
			</view>
			
			<view class="footer_btn">
				<view class="">
				</view>
				<view class="download" @click="canimg">
					保存到相册
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "老薛真帅",
				jin: "#F8E656"
			};
		},
		onLoad() {
			this.img()
			uni.getSetting({
				success(res) {
					console.log(res.authSetting)
				}
			})
		},
		methods: {
			img() {
				let that = this
				uni.getImageInfo({
					src: "",//背景图路径,我用的网络图片,本地的没试过
					success(res) {
						console.log(res.path)
						var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
						ctx.drawImage(res.path, 0, 0, 96,
							96) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
						ctx.setFontSize(12) //设置字体大小，默认10

						ctx.setFillStyle(that.jin) //文字颜色：默认黑色
						ctx.setTextAlign('center')//文本水平居中
						ctx.fillText(that.name, 48, 54); //文字内容、x坐标，y坐标
						ctx.save(); //保存
						ctx.draw() //绘制
					}
				})

			},
			// canvas生成图片
			canimg() {
				let that = this
				uni.canvasToTempFilePath({

					destWidth: 400,
					destHeight: 400,
					canvasId: 'firstCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath, "//")



						// 保存本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log("成功")
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
								});
							},
							fail: function(err) {
								console.log("失败", err)
							}
						})

					}
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f9;
	}

	.box {
		.box-title {
			width: 100%;

			color: #293444;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;

			.box-title_right {
				color: #5572fe;
				margin-left: 20rpx;
			}
		}

		.box_center {
			width: 100%;
			height: 1310rpx;
			background-color: #Fff;
			border-radius: 32rpx 32rpx 0 0;
			padding: 20rpx 20rpx;
			margin-top: 48rpx;
			.footer_btn{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 200rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				padding: 20rpx 20rpx;
				.download{
					width: 280rpx;
					height: 96rpx;
					border-radius: 48rpx;
					background-color: #4766FF;
					text-align: center;
					line-height: 96rpx;
					color: #fff;
					font-size: 32rpx;
				}
			}
		}
	}
</style>