当前位置： 首页 > article >正文

uniapp canvas 生成海报并保存到相册

article 2025/2/15 11:12:33

前言：

之前写过一篇canvas小程序画图只要是canvas各种方法的实际应用，有兴趣的小伙伴也可以看看

微信小程序：使用canvas 生成图片 并分享_小程序canvas生成图片-CSDN博客

上一篇文章是小试牛刀，这次是更加全面的记录生成海报的实战应用

一.实现核心原理

1.uni.createCanvasContext----创建canvas画布

uni.createCanvasContext(canvasId, componentInstance) | uni-app官网

2.uni.canvasToTempFilePath ---- 保存临时图片uni.canvasToTempFilePath(object, componentInstance) | uni-app官网

3.uni.saveImageToPhotosAlbum ----下载图片到本地

uni-app官网

利用canvas 先画出二倍图（这样导出的图片不会模糊），canvas容器本身通过visibility: hidden 进行隐藏，实际用image展示画好的海报，并通过uni.saveImageToPhotosAlbum 可进行下载。

二.实现代码

模板部分：

<!-- canvas 绘制海报 -->
	<view class="poster_box" v-if="showPoster">
		<view class="poster_title_box">
			<view class="poster_title">生成海报</view>
			<image @click="() => showPoster = false" class="poster_close"
				src="close.png"
				mode="scaleToFill" />
		</view>
	<image class="canvas_image" :src="lastGeneratedImage" alt="" show-menu-by-longpress/>
		<view class="poster_save_box" @click="savePosterByQR">
			<image class="poster_save"
				src="https://bhk-cms.oss-accelerate.aliyuncs.com/wechat/static/image/poster/poster_save.png"
				mode="scaleToFill" />
			<view class="poster_save_text">保存海报到本地</view>
		</view>
		<canvas canvas-id="positionPoster" class="canvas" :style="{width: canvasW,height:canvasH}">
		</canvas>
	</view>
	<!-- 海报遮罩 -->
<view v-if="showPoster" class="mask" @click="() => showPoster = false"></view>

样式部分：

.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #00000066;
	z-index: 120;
}

.poster_box {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 121;
	width: 606rpx;

	.poster_title_box {
		width: 100%;
		text-align: center;
		position: relative;
		font-family: PingFang SC;
		margin-bottom: 48rpx;

		.poster_title {
			font-size: 32rpx;
			font-weight: 500;
			line-height: 48rpx;
			color: #fff;
		}

		.poster_close {
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 0;
			width: 48rpx;
			height: 48rpx;
		}

	}

	.poster_save_box {
		margin-top: 40rpx;


		.poster_save {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 8rpx;

		}

		.poster_save_text {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 44rpx;
			text-align: center;
			color: #fff;

		}
	}

	.canvas_image {
		width: 606rpx;
		height: 924rpx;
	}

	.canvas {
		visibility: hidden;
		z-index: -999;
		position: absolute;
	
	}
}

vue部分：

function fillBg(ctx, height, color1, color2 = color1) {
	const gradient = ctx.createLinearGradient(0, height, 0, 0); // 从下往上渐变
	gradient.addColorStop(0, color1); // 起点颜色
	gradient.addColorStop(1, color2); // 终点颜色
	ctx.fillStyle = gradient;
}
function useCanvas() {
	const showPoster = ref(false);
	const canvas_finished = ref(true);
	const lastGeneratedImage = ref(null);
	const showPosterContent = ref(false);
	// 获取屏幕宽度和设备像素比
	const dpr = uni.getWindowInfo().pixelRatio; // 设备像素比
	const logicalWidth = toPx(303); // 逻辑宽度
	const logicalHeight = toPx(462); // 逻辑高度
	const canvasWidth = logicalWidth * dpr; // 实际宽度
	const canvasHeight = logicalHeight * dpr; // 实际高度
	// const canvasWidth = logicalWidth; // 实际宽度
	// const canvasHeight = logicalHeight; // 实际高度

	//绘制海报
	async function createPoster(options) {
		canvas_finished.value = true;
		showPosterContent.value = false;
		const { originData, houseData, rmb_price, price } = options;
		const width = toPx(303);
		const height = toPx(462);
		// 获取屏幕宽度（单位为 px）
		const screenWidth = uni.getWindowInfo().screenWidth;
		const screenHeight = uni.getWindowInfo().screenHeight;

		// 检查是否已经生成过图像
		if (lastGeneratedImage.value) {
			// 如果已经生成过图像，直接使用上次的图像数据
			const ctx = uni.createCanvasContext("positionPoster");
			ctx.clearRect(0, 0, width, height); // 清除画布
			ctx.drawImage(lastGeneratedImage.value, 0, 0); // 将上次的图像绘制回canvas
			ctx.draw();
			showPosterContent.value = true;
			uni.hideLoading();
			return; // 结束，不再重新生成
		}

		//初始化画布
		const ctx = uni.createCanvasContext("positionPoster");
		// ctx.scale(dpr, dpr);
		// 提取圆角值
		const bgRadius = [toPx(8), toPx(8), toPx(48), toPx(8)];

		/* 背景 */
		// 创建线性渐变（垂直方向，模拟 360deg）
		fillBg(ctx, height, "#669CFF", "#1F7CFF");

		/* 外层-圆角矩形开始 */
		drawRoundedRect(ctx, 0, 0, width, height, toPx(8));
		/* 外层-圆角矩形结束 */
		//画logo和背景图
		await drawImageWithCache(
			ctx,
			posterLogo,
			toPx(14),
			toPx(16),
			toPx(130),
			toPx(32)
		);
		await drawImageWithCache(
			ctx,
			posterBg,
			toPx(229),
			toPx(7),
			toPx(56),
			toPx(56)
		);

		//主要内容-content

		// /* content-圆角矩形开始 */
		ctx.setFillStyle("#fff");
		drawRoundedRect(ctx, toPx(14), toPx(60), toPx(275), toPx(316), toPx(8));
		/* content-圆角矩形结束 */

		// banner
		/* banner-圆角矩形开始 */
		ctx.fillStyle = "#fff";
		ctx.save(); // 保存当前绘制状态
		drawRoundedRect(ctx, toPx(26), toPx(72), toPx(251), toPx(154), toPx(4));
		ctx.clip(); // 限制绘制区域为圆角矩形
		/* banner-圆角矩形结束 */

		/*  banner图绘制开始*/
		const firstImg =
			originData.thumbnail + "?x-oss-process=image/resize,w_251/quality,q_85";

		await drawImageWithCache(
			ctx,
			firstImg,
			toPx(26),
			toPx(72),
			toPx(251),
			toPx(154)
		);

		// 恢复
		ctx.restore();
		/*  banner图绘制结束*/

		//title
		ctx.fillStyle = "#000";
		ctx.font = "18px PingFang SC";
		ctx.setFontSize(toPx(18));
		//多行显示
		toFormateStr(
			ctx,
			originData.title,
			toPx(26),
			toPx(250),
			toPx(26),
			toPx(250)
		);

		//两室两厅一卫 |90㎡| 芭提雅
		ctx.fillStyle = "#555";
		ctx.font = "10px PingFang SC";
		ctx.setFontSize(toPx(10));
		const room =
			houseData.bedroom === 0
				? "开间"
				: `${houseData.bedroom || "-"}卧${houseData.toilet || "-"}卫`;
		const area = houseData.building || "-";
		const location = houseData.area === 168 ? "芭提雅" : "曼谷";
		const info = `${room} | ${area}㎡ | ${location} `;
		ctx.fillText(info, toPx(26), toPx(302), toPx(250));

		//tag标签
		await drawImagesInRow(ctx, houseData);

		//价格
		drawPriceText(ctx, houseData, rmb_price, price);

		//画图二维码
		/* 二维码-圆角矩形开始 */
		ctx.fillStyle = "#fff";
		ctx.save(); // 保存当前绘制状态
		drawRoundedRect(ctx, toPx(233), toPx(390), toPx(56), toPx(56), toPx(4));
		ctx.clip();

		await drawImageWithCache(
			ctx,
			originData.wx_qr_code,
			toPx(237),
			toPx(394),
			toPx(48),
			toPx(48)
		);
		// // 恢复
		ctx.restore();
		/* 二维码-圆角矩形结束 */

		/* 右侧-文字部分 */
		ctx.fillStyle = "#fff";
		ctx.font = "14px PingFang SC";
		ctx.setFontSize(toPx(14));
		ctx.fillText("找大管家做省心业主", toPx(14), toPx(414), toPx(420));

		ctx.fillStyle = "#e3eeff";
		ctx.font = "8px PingFang SC";
		ctx.setFontSize(toPx(8));
		ctx.fillText("长按扫描二维码，查看详情", toPx(14), toPx(430), toPx(432));

		// 渲染
		// 保存本次生成的海报图为缓存
		ctx.draw(false, () => {
			uni.canvasToTempFilePath({
				canvasId: "positionPoster",
				width: canvasWidth,
				height: canvasHeight,
				destWidth: canvasWidth,
				destHeight: canvasHeight,
				success: function (res) {
					lastGeneratedImage.value = res.tempFilePath; // 缓存图片
					canvas_finished.value = false;
					showPosterContent.value = true;
					uni.showToast({
						title: "绘制成功",
					});
				},
				fail: function (error) {
					uni.showToast({
						title: "绘制失败",
					});
				},
				complete: function complete() {
					uni.hideLoading();
					uni.hideToast();
				},
			});
		});
	}

	//保存海报
	let isSaving = false; // 用于标记当前操作是否正在进行

	function savePosterByQR() {
		// 如果正在保存，直接返回，不执行后续操作
		if (isSaving) {
			return;
		}

		isSaving = true; // 设置标记，表示正在保存操作

		// 如果已缓存海报，直接返回
		if (lastGeneratedImage.value) {
			saveToUser(lastGeneratedImage.value);
		} else {
			isSaving = false; // 结束操作，重置标记
		}

		function saveToUser(tempFilePath) {
			// 画板路径保存成功后，调用方法把图片保存到用户相册
			uni.saveImageToPhotosAlbum({
				filePath: tempFilePath,
				success: (res) => {
					showPoster.value = false;
					uni.showToast({
						title: "保存成功",
						icon: "success",
					});
					isSaving = false; // 操作完成，重置标记
				},
				fail: (err) => {
					uni.showToast({
						title: "保存失败",
						icon: "fail",
					});
					showPoster.value = false;
					isSaving = false; // 操作完成，重置标记
				},
			});
		}
	}
	//隐藏海报
	function cancelPosterContent() {
		showPoster.value = false;
		showPosterContent.value = false;
	}

	return {
		showPoster,
		canvas_finished,
		showPosterContent,
		dpr,
		lastGeneratedImage,
		savePosterByQR,
		createPoster,
		cancelPosterContent,
	};
}
//多行文字绘制
/**
 * 将字符串格式化为适合在画布上显示的格式
 *
 * @param ctx 画布上下文
 * @param str 需要格式化的字符串
 * @param axisX 文本在画布上的起始x坐标
 * @param axisY 文本在画布上的起始y坐标
 * @param titleHeight 每行文本的高度
 * @param maxWidth 每行文本的最大宽度
 */
//多行文本
export function toFormateStr(ctx, str, axisX, axisY, titleHeight, maxWidth) {
	// 文本处理
	let strArr = str.split("");
	let row = [];
	let temp = "";
	for (let i = 0; i < strArr.length; i++) {
		if (ctx.measureText(temp).width < maxWidth) {
			temp += strArr[i];
		} else {
			i--; //这里添加了i-- 是为了防止字符丢失，效果图中有对比
			row.push(temp);
			temp = "";
		}
	}
	row.push(temp); // row有多少项则就有多少行

	//如果数组长度大于2，现在只需要显示两行则只截取前两项,把第二行结尾设置成'...'
	if (row.length > 2) {
		let rowCut = row.slice(0, 2);
		let rowPart = rowCut[1];
		let test = "";
		let empty = [];
		for (let i = 0; i < rowPart.length; i++) {
			if (ctx.measureText(test).width < maxWidth) {
				test += rowPart[i];
			} else {
				break;
			}
		}
		empty.push(test);
		let group = empty[0] + "..."; //这里只显示两行，超出的用...表示
		rowCut.splice(1, 1, group);
		row = rowCut;
	}
	// 把文本绘制到画布中
	for (let i = 0; i < row.length; i++) {
		// 一次渲染一行
		ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth);
	}
	// // 保存当前画布状态
	// ctx.save();
	// // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
	// ctx.draw();
}
//绘制图片
export function drawImageWithCache(context, imgUrl, x, y, width, height) {
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: imgUrl,
			success: function (res) {
				context.drawImage(res.path, x, y, width, height);
				resolve();
			},
			fail: function (err) {
				console.error("图片加载失败:", err);
				reject(err);
			},
		});
	});
}
//绘制圆角矩形
export function drawRoundedRect(
	ctx,
	x,
	y,
	width,
	height,
	r1,
	r2 = r1,
	r3 = r1,
	r4 = r1
) {
	ctx.beginPath();
	// 左上角
	ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
	// 上边线
	ctx.lineTo(x + width - r2, y);
	ctx.arc(x + width - r2, y + r2, r2, Math.PI * 1.5, Math.PI * 2);
	// 右边线
	ctx.lineTo(x + width, y + height - r3);
	ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI * 0.5);
	// 下边线
	ctx.lineTo(x + r4, y + height);
	ctx.arc(x + r4, y + height - r4, r4, Math.PI * 0.5, Math.PI);
	// 左边线
	ctx.lineTo(x, y + r1);
	ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
	ctx.closePath(); // 闭合路径
	ctx.fill(); // 填充路径
}
//多行tag
export async function drawImagesInRow(ctx, houseData) {
	
	// 设置起始位置和间距
	let currentX = toPx(26); // 起始位置，x 坐标
	const yPosition = toPx(312); // 图片绘制的 y 坐标
	const spacing = toPx(4); // 图片之间的间距

	// 遍历每个图像 URL，依次绘制图片
	for (let i = 0; i < imageUrls.length; i++) {
		const image = imageUrls[i];

		// 异步加载并绘制图片
		await drawImageWithCache(
			ctx,
			image.src,
			currentX,
			yPosition,
			image.width,
			image.height
		);

		// 更新当前的 x 坐标，图像绘制完成后将 x 坐标向右移动，考虑到间距
		currentX += image.width + spacing;
	}
}
//单位转换
export function toPx(px) {
	const devicePi = uni.getWindowInfo().pixelRatio;
	const screenWidth = uni.getWindowInfo().screenWidth;
	return (px / 375) * screenWidth;
}

海报展示：


http://www.kler.cn/a/546186.html

相关文章：

  • 【电脑】u盘重装win7
  • 【Spring Boot】Spring 魔法世界：Bean 作用域与生命周期的奇妙之旅
  • 今日AI和商界事件(2025-02-14)
  • 20250214在ubuntu20.04下使用obs studio录制外挂的1080p的USB摄像头【下载安装】
  • Python爬虫-猫眼电影的影院数据
  • 大模型WebUI：Gradio全解12——使用Agents和Tools智能代理工具构建UI（1）
  • 【IEEE/EI/CPCI检索】2025年第四届信号处理、信息系统与网络安全国际会议(SPISCS 2025)
  • 无需编码5分钟免费部署云上调用满血版DeepSeek
  • Python中的json文件操作
  • MySQL官网驱动下载(jar包驱动和ODBC驱动)【详细教程】
  • 模糊综合评价法：原理、步骤与MATLAB实现
  • ［每日动态］科技新闻每日信息差2025年2月14日
  • 阿里云一键部署DeepSeek-V3、DeepSeek-R1模型
  • springboot024企业客户管理系统
  • [免费]Springboot+Vue(带推荐算法)网上购物商城系统【论文+源码+SQL脚本】
  • DataX使用时常见问题（持续更新）
  • Python 调用 Azure OpenAI API
  • 【前端框架】深入Vue 3组件开发：构建高效灵活的前端应用
  • 企业使用统一终端管理(UEM)工具提高端点安全性
  • 基于SpringBoot的在线交通服务管理系统
  • django静态文件配置
  • C#两个集合多属性组合关联得到新的组合
  • 秘密信息嵌入到RGB通道的方式：分段嵌or完整嵌入各通道
  • 数据结构：串
  • 反向代理块sjbe
  • [Windows] 微软常用运行库合集版 2025.02.12