uniapp微信小程序保存海报到手机相册canvas

已于 2025-09-12 15:09:03 修改
阅读量905 收藏 26
点赞数 14
CC 4.0 BY-SA版权
分类专栏： uniapp 文章标签： uni-app 微信小程序 智能手机 canva可画
于 2025-09-12 15:07:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58953167/article/details/151618430
#VibeCoding·九月创作之星挑战赛#

在uniapp中实现微信小程序保存海报到手机相册，主要涉及Canvas绘制和图片保存。以下是关键步骤和代码示例：

一、关键代码展示：
1. 模板配置：页面展示该海报，可直接查看，也可下载保存到手机相册，html关键代码如下：
<view class="content">
	<canvas class="canvas-poster" canvas-id="canvasposter"></canvas>
</view>
2. 海报绘制：js关键代码如下：
//绘制到canvas
downloadQrcode: function() {
	var ctx = uni.createCanvasContext("canvasposter")
	let that = this

	// #ifdef MP-WEIXIN
	uni.downloadFile({
		url: 'https://xxx.zexun.tech/getfile/statics/cdn/images/large_invite_bg.png', // 网络图片链接
		success: downloadResult => {
			if (downloadResult.statusCode === 200) {
				/* 绘制第一张照片*/
				// 参数说明：('图片路径',canvas的横坐标，canvas的纵坐标，图片的宽度，图片的宽度)
				ctx.drawImage(downloadResult.tempFilePath, 0, 0, 750, 1624)

				// 绘制第二张图片-base64-转换真机可读
				wx.getFileSystemManager().writeFile({
					filePath: wx.env.USER_DATA_PATH + "/test.png",
					data: that.codeBase64,
					encoding: 'base64',
					success: (res) => {
						ctx.drawImage(wx.env.USER_DATA_PATH + "/test.png", 164,
							816, 420, 420)
						ctx.setTextAlign("center")
						ctx.setFontSize(34)  // 第一行文字
						ctx.fillStyle = '#2B5370'; // 设置文字颜色为白色
						ctx.fillText('我的邀请码：'+ that.$userInfo.agentNo, 375,
							668) //文字内容、x坐标，y坐标
						ctx.setFontSize(26) // 第二行文字
						ctx.fillStyle = '#636D86'; // 设置文字颜色为白色
						ctx.fillText('扫一扫下方二维码，成为我的业务伙伴', 365,
							782) //文字内容、x坐标，y坐标
						uni.showLoading({
							title: "图片生成中...",
						})
						ctx.draw(
							false,
							setTimeout(() => {
								that.getTempFilePath()
							}, 2500)
						)
					}
				})

			}
		},
		fail: () => {
			uni.showToast({
				title: '下载失败',
				icon: 'none'
			});
		}
	});
	// #endif
},
//获取临时路径
getTempFilePath: function() {
	// 当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
	uni.canvasToTempFilePath({
		canvasId: "canvasposter",
		success: (res) => {
			console.log(res.tempFilePath)
			this.saveImageToPhotosAlbum(res.tempFilePath) //保存到相册
		},
	})
},
//把生成的图片保存至相册
saveImageToPhotosAlbum: function(imgUrl) {
	uni.hideLoading()
	if (imgUrl) {
		uni.saveImageToPhotosAlbum({
			filePath: imgUrl,
			success: (res) => {
				uni.showToast({
					title: "保存成功",
					icon: "success",
					duration: 2000,
				})
			},
			fail: (err) => {
				uni.showToast({
					title: "保存失败",
					icon: "none",
					duration: 2000,
				})
			},
		})
	} else {
		uni.showToast({
			title: "绘制中……",
			icon: "loading",
			duration: 3000,
		})
	}
},
3. 样式css关键代码如下：
/* 绘制图片canvas样式 */
.canvas-poster {
	position: fixed;
	width: 750px;
	height: 1624px;
	top: 100%;
	left: 100%;
}
二、完整代码附录：
<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<view class="guide_header_page2">
			<view :style="{ height: statusBarHeight }"></view>
			<view class="guide_title" :style="{ height: navigationBarHeight, lineHeight:navigationBarHeight  }">
				<uni-icons type="back" size="22" color="#232323" @click="goBack" class="icon"></uni-icons>
				<text>我的邀请码</text>
			</view>
		</view>
		<!-- #endif -->

		<view class="invite">
			<image src="https://xxx.zexun.tech/getfile/statics/cdn/images/large_invite_bg.png" mode="widthFix"
				class="bg" />
			<view class="invite_title">我的邀请码：{{$userInfo.agentNo}}</view>
			<view class="invite_tip">
				扫一扫下方二维码，成为我的业务伙伴
			</view>
			<image :src="'data:image/png;base64,' + codeBase64" mode="widthFix" class="qrcode" />
			<view class="invite_btn">
				<u-button text="保存图片" shape="circle" color="linear-gradient(to right, #26B6B9, #21CE98)" @click="downloadQrcode"></u-button>
			</view>
		</view>
		<canvas class="canvas-poster" canvas-id="canvasposter"></canvas>
	</view>
</template>

<script>
	import {
		getInvitationCode
	} from '@/common/api.js'
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px', // 状态栏高度
				capBarHeight: uni.getMenuButtonBoundingClientRect().height + 'px', // 胶囊高度
				navigationBarHeight: (uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync()
					.statusBarHeight) * 2 + uni.getMenuButtonBoundingClientRect().height + 'px', // 导航栏高度
				barCapHeight: (uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync()
						.statusBarHeight) * 2 + uni.getMenuButtonBoundingClientRect().height + uni.getSystemInfoSync()
					.statusBarHeight + 'px', //导航栏高度+状态栏高度
				// #endif
				codeBase64: null,
				type: '2', // 2-服务商邀请码，3-业务员邀请码
			}
		},
		onLoad() {
			this.getInvitationCode()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 获取二维码
			getInvitationCode() {
				uni.showLoading({
					mask: true
				})
				getInvitationCode({
						inviteCode: this.$store.state.$userInfo.agentId,
						type: this.type
					})
					.then((res) => {
						uni.hideLoading()
						this.codeBase64 = res.data
					})
					.catch((err) => {
						uni.hideLoading()
						console.log(err)
					})
			},
			//绘制到canvas
			downloadQrcode: function() {
				var ctx = uni.createCanvasContext("canvasposter")
				let that = this

				// #ifdef MP-WEIXIN
				uni.downloadFile({
					url: 'https://xxx.zexun.tech/getfile/statics/cdn/images/large_invite_bg.png', // 网络图片链接
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							/* 绘制第一张照片*/
							// 参数说明：('图片路径',canvas的横坐标，canvas的纵坐标，图片的宽度，图片的宽度)
							ctx.drawImage(downloadResult.tempFilePath, 0, 0, 750, 1624)

							// 绘制第二张图片-base64-转换真机可读
							wx.getFileSystemManager().writeFile({
								filePath: wx.env.USER_DATA_PATH + "/test.png",
								data: that.codeBase64,
								encoding: 'base64',
								success: (res) => {
									ctx.drawImage(wx.env.USER_DATA_PATH + "/test.png", 164,
										816, 420, 420)
									ctx.setTextAlign("center")
									ctx.setFontSize(34)  // 第一行文字
									ctx.fillStyle = '#2B5370'; // 设置文字颜色为白色
									ctx.fillText('我的邀请码：'+ that.$userInfo.agentNo, 375,
										668) //文字内容、x坐标，y坐标
									ctx.setFontSize(26) // 第二行文字
									ctx.fillStyle = '#636D86'; // 设置文字颜色为白色
									ctx.fillText('扫一扫下方二维码，成为我的业务伙伴', 365,
										782) //文字内容、x坐标，y坐标
									uni.showLoading({
										title: "图片生成中...",
									})
									ctx.draw(
										false,
										setTimeout(() => {
											that.getTempFilePath()
										}, 2500)
									)
								}
							})

						}
					},
					fail: () => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
				// #endif


				// #ifndef MP-WEIXIN
				/* 绘制第一张照片*/
				// 参数说明：('图片路径',canvas的横坐标，canvas的纵坐标，图片的宽度，图片的宽度)
				ctx.drawImage("https://jsfzapi.zexun.tech/getfile/statics/cdn/images/invite_bg.png", 0, 0,
					750, 1624)
				/* 绘制第二张照片*/
				ctx.drawImage("data:image/png;base64," + this.codeBase64, 164, 912, 420, 420)
				ctx.setTextAlign("center")
				ctx.setFontSize(32)
				ctx.setTextAlign("center")
				ctx.fillText(this.$realAgentInfo.shortName, 375, 880) //文字内容、x坐标，y坐标
				uni.showLoading({
					title: "图片生成中...",
				})
				ctx.draw(
					false,
					setTimeout(() => {
						this.getTempFilePath()
					}, 1500)
				)
				// #endif
			},
			//获取临时路径
			getTempFilePath: function() {
				// 当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
				uni.canvasToTempFilePath({
					canvasId: "canvasposter",
					success: (res) => {
						console.log(res.tempFilePath)
						this.saveImageToPhotosAlbum(res.tempFilePath) //保存到相册
					},
				})
			},
			//把生成的图片保存至相册
			saveImageToPhotosAlbum: function(imgUrl) {
				uni.hideLoading()
				if (imgUrl) {
					uni.saveImageToPhotosAlbum({
						filePath: imgUrl,
						success: (res) => {
							uni.showToast({
								title: "保存成功",
								icon: "success",
								duration: 2000,
							})
						},
						fail: (err) => {
							uni.showToast({
								title: "保存失败",
								icon: "none",
								duration: 2000,
							})
						},
					})
				} else {
					uni.showToast({
						title: "绘制中……",
						icon: "loading",
						duration: 3000,
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* 绘制图片canvas样式 */
	.canvas-poster {
		position: fixed;
		width: 750px;
		height: 1624px;
		top: 100%;
		left: 100%;
	}

	.content {
		.invite {
			width: 100%;
			position: relative;

			.bg {
				width: 750rpx;
			}

			.invite_title {
				min-width: 418rpx;
				position: absolute;
				left: 52%;
				transform: translateX(-50%);
				top: 630rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #2B5370;
			}
			
			.invite_tip {
				min-width: 442rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 766rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #636D86;
			}

			.qrcode {
				width: 420rpx;
				height: 420rpx;
				left: 50%;
				transform: translateX(-50%);
				top: 830rpx;
				position: absolute;
			}

			.invite_btn {
				width: 484rpx;
				height: 76rpx;
				bottom: 176rpx;
				position: absolute;
				z-index: 999;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>
三、效果图展示：

在这里插入图片描述

提示：使用 uni.downloadFile 下载网络图片 https://xxx.xxx 等，需要在小程序后台配置服务器域名；
在这里插入图片描述

有什么疑问，可以评论区回复，大家一起探讨~

uniapp 微信小程序 分享海报的实现
m0_49515138的博客
04-26 1823
components/poster/index 组件。
uniapp微信小程序生成分享海报(模板自取)
qq_47195437的博客
06-20 6805
uniapp微信小程序生成分享海报
UniApp：微信小程序中使用canvas生成海报
rxq134836的博客
04-02 322
【代码】UniApp：微信小程序中使用canvas生成海报。
uniapp微信小程序保存图片到本地失败的原因有哪些
weixin_42591908的博客
12-20 3895
微信小程序使用 uniapp 框架保存图片到本地可能会失败，主要原因可能有以下几点： 用户没有授权小程序保存图片到本地的权限。在微信小程序中，需要用户授权后才能使用保存图片的功能。 图片的 URL 无效或者无法访问。在调用 uniapp 的 wx.saveImageToPhotosAlbum 方法保存图片时，需要传入图片的 URL。如果图片的 URL 无效或者无法访问，保存图片就会失败。 图...
Uniapp微信小程序使用canvas绘制并下载图片
BewHYzzz的博客
06-18 3035
测试阶段发现，部分安卓机型在canvas第一次绘制时会报wx.canvasToTempFilePath：create bitmap failed，可能是不分机型的性能使得图形绘制失败，图片保存下来也是纯白色的底图。最近项目中有一个下载图片和一个分享海报的功能，遇到了一些问题，比如海报图片生成失败、图片下载是空白的、多张图片下载时下载的还是前一张图片等等。这里使用Promise的原因是有多张图片需要单独下载，切换图片点击下载按钮开始绘制图像，确保在图像canvas生成完毕后继续下载的步骤。
使用uniapp框架在微信小程序中生成海报保存下来
weixin_43907578的博客
09-07 807
设计稿给我一个655rpx*960rpx大的弹出框的设计图，两边距离屏幕48rpx =>655/(655+96)=0.872(约等于）设计给的高度1438rp来标准的=》960/1438=0.668,高度就是这样算出来的，后面的数据也是如此算出来。在<script></script>添加相关的逻辑代码，drawImage()是生成画布。当然，有更好的方法可以一起分享，这只是我自己记录自己的目前开发用到的方法。使用比例计算来解决不用手机下载图片不一样的情况。只要是我使用的按照设计稿给的尺寸就行换算大小的。
uniapp开发微信小程序生成海报并下载
qq_54551471的博客
03-12 651
uniapp开发微信小程序时，将内容以海报得形式展示并进行下载到相册中
uniapp微信小程序canvas生成简单海报并下载
qq_35946021的博客
05-05 1772
今天项目接到个任务，就是手写canvas海报，并能下载图片。百度了很多海报组件，都不尽人意。萌生了自己手写海报的想法。 话不多说先贴文档uni-app官网 其实该文档和微信小程序类似 最终效果，微信小程序可用，一个一个代码敲出来的。只要把原理掌握了，任何海报都能迎刃而解 1.准备环境 因为海报涉及到第三方的图片存储地址，所以要加白名单 downloadFile 里加你海报的根域名 记住一定要在这看看有没有加好白名单，刷新一下要不然还是会加载中空白的效果 话不多说上代码....
uniapp实现微信小程序端动态生成海报
sxy323的博客
03-08 4103
uniapp、微信小程序、动态海报
uni-app微信小程序生成海报.rar
02-07
【uni-app微信小程序生成海报】 在移动应用开发领域，uni-app是一个备受瞩目的框架，它由ECharts团队推出，旨在实现跨平台开发，支持包括微信小程序、H5、App等在内的多个平台。本教程将详细讲解如何使用uni-app来...
微信小程序实现分享商品海报功能
12-13
以上就是微信小程序实现分享商品海报功能的主要步骤，包括图片的本地缓存、海报的绘制、分享配置以及保存图片到相册。在实际开发中，可能还需要根据业务需求进行细节调整，如动态加载数据、优化性能等。对于使用其他...
苹果上架全流程详解，iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核要点完整指南
2501_91600747的博客
09-11 1037
本文全面解析苹果上架流程，涵盖 iOS 应用从开发者账号、证书管理、uni-app 打包，到跨平台上传、TestFlight 测试分发与 App Store 审核的全流程，结合多工具协作，提供高效实用的发布指南。
App 上架全流程指南，iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
2501_91601374的博客
09-10 806
本文系统解析 App 上架流程，涵盖 iOS 证书准备、uni-app 打包、跨平台上传、TestFlight 测试分发与 App Store 审核要点，结合多工具协作，提供高效实用的应用上架实战指南。
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
最新发布
2501_91510632的博客
09-12 291
本文详解 Xcode 上传 ipa 的完整流程，涵盖 iOS 应用从证书准备、uni-app 打包、Xcode 上传，到 Transporter、Appuploader 等工具配合使用，以及 TestFlight 测试与 App Store 审核的实战经验，帮助开发者高效完成应用上架。
＜uniapp＞＜指针组件＞基于uniapp，编写一个自定义箭头指针组件
用沸腾的热血，支付我们的人生吧！
09-10 448
本文介绍了基于uniapp开发的自定义带箭头指针组件，通过SVG实现直线和箭头的组合效果。组件支持设置长度、颜色、角度等参数，并提供三种箭头规格(small/normal/big)可选。文章详细讲解了SVG结构的实现过程，包括计算终点坐标、响应式参数处理等核心功能，并展示了不同配置下的指针效果。该组件可用于时钟指针等场景，具有灵活性和复用性特点。
UniApp微信小程序-实现蓝牙功能
叶子的博客
09-10 728
uniapp微信小程序使用连接蓝牙功能，使用微信官方蓝牙api（如：初始化蓝牙设备uni.openBluetoothAdapter。连接低功耗蓝牙设备uni.createBLEConnection。向低功耗蓝牙设备特征值中写入二进制数据uni.writeBLECharacteristicValue 等等）
在uniapp/vue项目中全局挂载component
--=
09-10 301
easycom,全局挂载组件，uniapp
uni-app + Vue3 开发展示 echarts 图表
cdd9527的博客
09-11 179
uni-app + Vue3 开发展示 echarts 图表
在uni-app中使用lottie-web来展示Lottie动画
Alexander Wei的博客
09-09 303
效果图。
uniapp(微信小程序端)生成海报
04-15
<think>好的，我现在需要帮助用户解决在UniApp中为微信小程序生成海报的问题。用户提到参考了两个引用，其中提到了snapshot组件和canvas的使用。首先，我需要理清这些步骤。 首先，用户提供的引用[1]详细说明了如何配置manifest.json和页面设置，包括启用Skyline渲染引擎和自定义导航栏。这可能是因为生成海报需要更高效的渲染能力，而Skyline可能提供了更好的性能支持。不过，用户提到不确定snapshot的效果，可能需要进一步验证步骤是否正确。 引用[2]则提到了在模板中使用canvas组件，并指定了type为2d，这可能是微信小程序的新版Canvas API，需要确认uniapp是否支持这种写法。同时，用户的需求是生成海报并保存，通常需要绘制图片、文字等到Canvas上，然后转换为图片保存到本地。 接下来，我需要将这两个引用中的信息结合起来，形成一个完整的教程。首先，配置项目的manifest.json，确保微信小程序的设置正确，特别是Skyline相关的配置和自定义导航栏。然后，在页面中添加Canvas组件，注意使用type="2d"以确保使用新版API。接着，可能需要使用uniapp的JS API来操作Canvas，比如通过uni.createCanvasContext或者微信的原生API进行绘制。这里需要注意uniapp的语法和微信原生API之间的差异，可能需要条件编译来处理不同平台的问题。 另外，用户提到snapshot组件的示例代码需要复制到项目中，如果是vue3的setup写法，可能需要创建另一个script标签来兼容vue2的方法。这说明用户可能在处理不同版本的语法时遇到了问题，需要指导如何正确整合代码。 然后，生成海报的具体步骤可能包括：设置Canvas的宽高，绘制背景图片、文本、二维码等内容，最后调用CanvasToTempFilePath将Canvas内容导出为图片路径，再保存到相册。在此过程中，需要注意权限问题，比如用户需要授权相册写入权限，否则保存会失败。 同时，用户可能遇到的常见问题包括Canvas绘制内容不显示、图片跨域问题、真机调试时的兼容性问题等。需要提醒用户检查网络请求是否合法（HTTPS）、图片资源是否加载完成，以及使用真机调试确认功能正常。 最后，生成相关问题需要考虑用户可能进一步的需求，比如如何动态调整海报内容、如何优化性能、处理不同屏幕尺寸的适配等。确保问题覆盖用户可能遇到的后续挑战，帮助他们深入理解和解决问题。</think>### UniApp微信小程序生成海报实现教程 根据官方文档和开发实践，以下是实现步骤及注意事项： #### 一、环境配置 1. **manifest.json配置** ```json "mp-weixin": { "appid": "你的小程序ID", "lazyCodeLoading": "requiredComponents", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "sdkVersionBegin": "3.0.1", "sdkVersionEnd": "15.255.255" } }, "style": "v2", "componentFramework": "glass-easel" } ``` *注意：Skyline渲染引擎可提升性能，但需要基础库3.0.1+支持[^1]* #### 二、页面配置 ```json // page.json { "navigationStyle": "custom", "renderer": "skyline", "componentFramework": "glass-easel" } ``` *必须设置自定义导航栏以适应海报全屏布局[^1]* #### 三、视图层实现 ```html <template> <view class="container"> <!-- 2D Canvas容器 --> <canvas canvas-id="posterCanvas" id="posterCanvas" type="2d" :style="{ width: '655rpx', height: '960rpx' }"> </canvas> <!-- 保存按钮 --> <button @tap="savePoster">保存海报</button> </view> </template> ``` *使用type="2d"获取Canvas 2D上下文[^2]* #### 四、逻辑层实现 ```javascript // Vue3 Composition API import { onMounted } from 'vue' import { useBase64 } from '@/utils/util' export default { setup() { let canvasCtx = null onMounted(async () => { // 初始化Canvas const query = uni.createSelectorQuery() query.select('#posterCanvas') .fields({ node: true, size: true }) .exec(async (res) => { const canvas = res[0].node const dpr = uni.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr // 获取2D上下文 canvasCtx = canvas.getContext('2d') canvasCtx.scale(dpr, dpr) // 开始绘制 await drawPoster() }) }) // 绘制海报 const drawPoster = async () => { try { // 绘制背景 canvasCtx.fillStyle = '#FFFFFF' canvasCtx.fillRect(0, 0, 655, 960) // 添加图片（示例） const img = await loadImage('/static/logo.png') canvasCtx.drawImage(img, 50, 50, 100, 100) // 添加文字 canvasCtx.font = '20px sans-serif' canvasCtx.fillStyle = '#333333' canvasCtx.fillText('扫码加入我们', 200, 100) } catch (e) { console.error('绘制失败:', e) } } // 图片加载方法 const loadImage = (src) => { return new Promise((resolve, reject) => { const img = canvas.createImage() img.onload = () => resolve(img) img.onerror = reject img.src = src }) } // 保存海报 const savePoster = () => { uni.canvasToTempFilePath({ canvasId: 'posterCanvas', success: (res) => { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => uni.showToast({ title: '保存成功' }), fail: () => uni.showToast({ title: '请授权相册权限' }) }) } }) } return { savePoster } } } ``` #### 五、注意事项 1. **图片跨域问题**：网络图片需配置downloadFile域名白名单 2. **真机调试**：务必在真机测试保存功能，模拟器可能无法正常保存 3. **权限处理**：需处理相册授权逻辑`scope.writePhotosAlbum` 4. **单位转换**：rpx到px的转换需考虑设备屏幕密度 5. **性能优化**：复杂海报建议预生成或服务端生成
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值