在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-WEIXINuni.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-WEIXINstatusBarHeight: 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', //导航栏高度+状态栏高度// #endifcodeBase64: 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)})},//绘制到canvasdownloadQrcode: function() {var ctx = uni.createCanvasContext("canvasposter")let that = this// #ifdef MP-WEIXINuni.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 等，需要在小程序后台配置服务器域名；
在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/97839.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/97839.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/97839.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

glib2-2.62.5-7.ky10.x86_64.rpm怎么安装？Kylin Linux RPM包安装详细步骤

glib2-2.62.5-7.ky10.x86_64.rpm怎么安装？Kylin Linux RPM包安装详细步骤

一、准备工作 ​确认系统版本​ 这个包是 ky10的&#xff08;也就是 openEuler 20.03 LTS SP3 或类似版本&#xff09;&#xff0c;而且是 ​x86_64 架构&#xff08;就是常见的64位电脑&#xff09;​。 你要先确认你的系统是不是这个版本&#xff0c;不然可能装不上或者出问题…
阅读更多...
webrtc之语音活动下——VAD人声判定原理以及源码详解

webrtc之语音活动下——VAD人声判定原理以及源码详解

文章目录前言一、高斯混合模型介绍1.高斯模型举例1&#xff09;定义2&#xff09;举例说明2.高斯混合模型(GMM)1&#xff09;定义2&#xff09;举例说明3&#xff09;一维曲线二、VAD高斯混合模型1.模型训练介绍1&#xff09;训练方法2&#xff09;训练结果2.噪声高斯模型分布1…
阅读更多...
【Redis】-- 主从复制

【Redis】-- 主从复制

文章目录1. 主从复制1.1 主从复制是怎么个事&#x1f914;1.2 拓扑结构1.2.1 一主一从拓扑1.2.2 一主多从拓扑1.2.3 树形拓扑1.3 主从复制原理1.3.1 复制过程1.3.2 数据同步PSYNC1.3.2.1 replicationid/replid (复制id)1.3.2.2 复制偏移量维护1.3.3 psync运行流程1.3.4 全量复制…
阅读更多...
开源炸场！阿里通义千问Qwen3-Next发布：80B参数仅激活3B，训练成本降90%，长文本吞吐提升10倍​

开源炸场！阿里通义千问Qwen3-Next发布：80B参数仅激活3B，训练成本降90%，长文本吞吐提升10倍​

开源炸场&#xff01;阿里通义千问Qwen3-Next发布&#xff1a;80B参数仅激活3B&#xff0c;训练成本降90%&#xff0c;长文本吞吐提升10倍​ 开源世界迎来震撼突破&#xff01; 通义千问团队最新发布的Qwen3-Next架构&#xff0c;以其独创的"小而精"设计理念&#x…
阅读更多...
【C++入门】C++基础

【C++入门】C++基础

目录 1. 命名空间 1.1 命名空间的创建和使用 2. 输入输出 2.1 输出 2.2 输入 3. 缺省参数 3.1 全缺省 3.2 半缺省 4.函数重载 4.1 为什么C支持重载而C语言不支持&#xff1f; 4.1.2 编译的四个过程 4.2 extern是什么 5.引用 5.1 引用的特性 5.1.1 引用的“隐式类…
阅读更多...
如何往mp4视频添加封面图和获取封面图？

如何往mp4视频添加封面图和获取封面图？

前言&#xff1a;大家好&#xff0c;之前有给大家分享过mp4录像的方案&#xff0c;今天给大家分享的内容是&#xff1a;如何在添加自定义的封面图到mp4里面去&#xff0c;以及在进入回放mp4视频列表的时候&#xff0c;怎么获取mp4视频里面的封面图&#xff0c;当然这个获取到的…
阅读更多...
你的第一个Transformer模型：从零实现并训练一个迷你ChatBot

你的第一个Transformer模型：从零实现并训练一个迷你ChatBot

点击 “AladdinEdu&#xff0c;同学们用得起的【H卡】算力平台”&#xff0c;注册即送-H卡级别算力&#xff0c;80G大显存&#xff0c;按量计费&#xff0c;灵活弹性&#xff0c;顶级配置&#xff0c;学生更享专属优惠。 引言&#xff1a;破除神秘感&#xff0c;拥抱核心思想 …
阅读更多...
【20期】沪深指数《实时交易数据》免费获取股票数据API：PythonJava等5种语言调用实例演示与接口API文档说明

【20期】沪深指数《实时交易数据》免费获取股票数据API：PythonJava等5种语言调用实例演示与接口API文档说明

​ 随着量化投资在金融市场的快速发展&#xff0c;高质量数据源已成为量化研究的核心基础设施。本文将系统介绍股票量化分析中的数据获取解决方案&#xff0c;涵盖实时行情、历史数据及基本面信息等关键数据类型。 本文将重点演示这些接口在以下技术栈中的实现&#xff1a; P…
阅读更多...
RabbitMQ如何保障消息的可靠性

RabbitMQ如何保障消息的可靠性

文章目录什么是消息可靠性&#xff1f;RabbitMQ消息可靠性的三个维度1. 生产者到Exchange的可靠性2. Exchange到Queue的可靠性3. Queue到消费者的可靠性核心机制详解Publisher Confirm机制消息持久化Mandatory参数消费者确认机制&#xff08;ACK&#xff09;最佳实践建议1. 合理…
阅读更多...
二十、DevOps落地：Jenkins基础入门（一）

二十、DevOps落地：Jenkins基础入门（一）

二十、DevOps落地&#xff1a;Jenkins基础入门&#xff08;一&#xff09; 文章目录二十、DevOps落地&#xff1a;Jenkins基础入门&#xff08;一&#xff09;1、DevOps初识1.1 什么是DevOps1.2 DevOps相关工具链1.3 什么是CICD&#xff1f;1.4 持续集成CI介绍1.5 持续交付和持…
阅读更多...
简单易实现的数据校验方法Checksum

简单易实现的数据校验方法Checksum

简单易实现的数据校验方法Checksum 在数据传输中&#xff0c;Checksum&#xff08;校验和&#xff09; 扮演着 “数据完整性哨兵” 的角色。它的主要作用是 快速检测数据在传输过程中是否发生了错误 。 下面我将详细解释它的作用、工作原理、优缺点以及典型应用。 核心作用&…
阅读更多...
再次深入学习深度学习|花书笔记1

再次深入学习深度学习|花书笔记1

我已经两年没有碰过深度学习了&#xff0c;写此文记录学习过程&#xff0c;加深理解。 深度学习再次深入学习深度学习|花书笔记1信息论第四节 数值计算中的问题上溢出 和 下溢出病态条件优化法再次深入学习深度学习|花书笔记1 这本书说的太繁琐了&#xff0c;如果是想要基于这…
阅读更多...
DeerFlow实践：华为LTC流程的评审智能体设计

DeerFlow实践：华为LTC流程的评审智能体设计

目录 一、机制设计核心逻辑 二、4 个评审点智能体机制详解 &#xff08;一&#xff09;立项决策&#xff08;ATI&#xff09;智能体机制 1. 知识调用与匹配 2. 评审校验流程 3. 异常处理 &#xff08;二&#xff09;投标决策&#xff08;ATB&#xff09;智能体机制 1. …
阅读更多...
C++与Lua交互：从原理到实践指南

C++与Lua交互：从原理到实践指南

核心原理&#xff1a;Lua虚拟栈机制 C与Lua能够高效交互的核心在于Lua虚拟栈的设计&#xff0c;这是一个精巧的中立通信区&#xff0c;解决了两种语言间的本质差异&#xff1a;特性对比CLua语言类型静态编译型动态解释型数据管理明确内存布局虚拟机统一管理类型系统编译时确定运…
阅读更多...
CSS 编码规范

CSS 编码规范

CSS 编码规范1 CSS1.1 编码规范1.1.1 【强制】所有声明必须以分号结尾1.1.2 【推荐】使用 2 个空格缩进1.1.3 【推荐】选择器与 { 之间保留一个空格1.1.4 【推荐】属性值规范1.1.5 【推荐】组合器规范1.1.6 【推荐】逗号分隔规范1.1.7 【推荐】注释规范1.1.8 【推荐】右大括号规…
阅读更多...
ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务

ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务

已经不止一次自己本机电脑安装的Oracle使用plsqldev软件登入提示这个了.一般前一天还好好的&#xff0c;今天就不行了.好好总结一下吧&#xff0c;也共大家一起借鉴.主要原因还是数据的归档日志因为内部内存已经耗尽&#xff0c;不能在进行归档导致数据库启动异常&#xff0c;没…
阅读更多...
Spring框架的JDBC模板技术和事务管理

Spring框架的JDBC模板技术和事务管理

SpringJDBCJDBC模板技术概述JDBC的模板类的使用Spring框架的事务管理配置文件方式半注解的方式纯注解的方式JDBC模板技术概述 什么是 JDBC 模板技术&#xff1f; JDBC 模板技术是 Spring 框架为简化持久层&#xff08;数据库操作&#xff09;编程而提供的一种封装机制&#xf…
阅读更多...
将文件部署到受管主机

将文件部署到受管主机

目录 1.ansible.builtin中用于创建、更新或删除多行文本块的模块是什么 2.copy模块的作用 3.fetch模块的作用 4.file模块的作用 5.lineinfile模块的作用 6.stat模块的作用 7.要确保受管主机上存在文件&#xff0c;类似touch命令功能&#xff0c;还能设置权限等的模块及操作是怎…
阅读更多...
Dell PowerEdge R620 服务器内存和硬盘罢工了

Dell PowerEdge R620 服务器内存和硬盘罢工了

文章目录前言调查原因查找解决方案硬盘问题内存问题总结前言 月黑风高夜&#xff0c;服务宕机时。做服务端技术的&#xff0c;谁还没半夜遇到个服务挂掉的情况&#xff0c;而像我这种半兼职网管的工作&#xff0c;遇到机器问题的概率也就更大了&#xff0c;本来周五晚上写完总…
阅读更多...
2025：SourceTree 启用/禁用Mercurial 或 Git，像素级细节

2025：SourceTree 启用/禁用Mercurial 或 Git，像素级细节

最近使用Git管理工具的时候&#xff0c;发现还是SourceTree好用些&#xff0c;但是使用SourceTree带来一个问题&#xff1a;就是每次在重新打开SourceTree的时候&#xff0c;都会重新下载Mercurial.zip文件&#xff0c;查了一下&#xff0c;一般情况下我们是不需要使用Mercuria…
阅读更多...
最新文章

Copyright @ 2022~2023