【uniapp踩坑记】——微信小程序转发保存图片

关于微信小程序转发&保存图片

  • 微信小程序图片转发保存简单说明
  • 网络图片的转发保存
  • base64流形式图片转发保存

已经好多年没写博客了,最近使用在用uniapp开发一个移动版管理后台,记录下自己踩过的一些坑
吃相别太难看,搞一堆下头僵尸号来点赞收藏我的东西,我情愿它就这样放着吃灰

微信小程序图片转发保存简单说明

微信小程序图片转发保存,依赖小程序的转发api—— wx.showShareImageMenu(Object object)
通过调用这个api能触发如下弹窗

在这里插入图片描述

代码如下:

wx.showShareImageMenu({path: filePath,//图片地址必须为本地路径或者临时路径success: (re) => {console.log({ success: re })},fail: (re) => {console.log({ fail: re })}})

这个api要求要分享的图片地址必须为本地路径或者临时路径,所以如果你的图片是本地路径或者临时路径,那就不需要继续往下看了。
如果不是本地路径或者临时路径,那我们要解决的问题就是怎么把图片转为临时路径,这里常见有两种图片形式:

网络图片:https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg

base64流形式图片:data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAPoA+gDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVF

网络图片的转发保存

网络图片的转发,依赖于小程序的下载api——wx.downloadFile(Object object)
通过调用这个api,可以将网络图片下载到临时文件夹中,然后再调用转发api,代码如下:

	wx.downloadFile({url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',success: (res) => {console.log({success:res})wx.showShareImageMenu({path: res.tempFilePath,success:(re)=>{console.log({success1:re})},fail:(re)=>{console.log({fail1:re})}})},fail:(res)=>{console.log({fail:res})}})

注意事项

这里要求下载域名必须在小程序开发配置白名单中
在这里插入图片描述

base64流形式图片转发保存

流形式图片这里需要用到小程序api——FileSystemManager.writeFile(Object object)
这里就是通过文件api,将流图片写入临时路径,再调用转发api,代码如下

		// 临时文件路径,可以自定义文件名和格式const filePath = wx.env.USER_DATA_PATH + '/temp-image.jpg'; //需要将流图片中的data:image/png;base64,去掉const data=url.replace("data:image/png;base64,","")uni.getFileSystemManager().writeFile({filePath: filePath,data: data,encoding: 'base64',success: () => {console.log('临时文件路径:', filePath);wx.showShareImageMenu({path: filePath,success: (re) => {console.log({ success1: re })},fail: (re) => {console.log({ fail1: re })}})// 在这里可以进行后续操作,比如展示图片等},fail: (error) => {console.error('写入临时文件失败', error);}});

注意事项
1.wx.env.USER_DATA_PATH:这个为小程序的环境变量,与机型无关,无需配置,直接使用即可
2.这个功能在开发工具调试能正常显示、在体验版小程序也能正常显示,在开发版小程序(即真机调试)中会报错,提示:showShareImageMenu:fail Cannot read property ‘initScl’ of undefined

这个情况告诉我们,不要过度依赖真机调试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/30.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vite(vue3)配置内网ip访问的方法步骤

如果没有进行配置,运行项目之后,看到的访问地址是本地访问地址,其他人访问不了。 如下: 一、配置 “ vite.config.ts ” 文件 server: {host: 0.0.0.0 }, 如图所示: 添加 server 配置后保存 “ vite.config.ts ” 文…

深度学习发展中的继承和创新

深度学习是一步一步发展而来的,新的成就也是在原有的基础上,逐步取得突破,有一些东西是一点一点变化,突破发展而来的,也就是每一次小的突破和每一次小的突破累积起来,构成一个明显的进步。我们可以通过观察…

C语言 ─── 操作符详解

目录 1. 算术操作符 2. 移位操作符 2.1 左移操作符 2.2 右移操作符 3. 位操作符 4. 复合赋值符 5. 单目操作符 6. 逗号表达式 7. 隐式类型转换 7.1 整型提升的意义: 7.2 如何进行整体提升呢? 8. 算术转换 ★★★数组名 1. 算术操作符 -…

实现联系人前后端界面,实现分页查询04.15

实现联系人前后端界面,实现分页查询项目包-CSDN博客 项目结构 数据库中建立两个表: 完整的后端目录 建立联系人People表,分组Type表,实现对应实体类 根据需求在mapper中写对应的sql语句 查询所有,删除,添…

js BOM模型常用方法梳理

1、Bom定义 BOM是操作浏览器的模型,主要是对浏览器的一些操作。 2、获取浏览器窗口的尺寸 window.innerHeight:获取窗口的高度。 window.innerWidth:湖区窗口的宽度,只在window浏览器下使用。 3、弹出层 alert:弹出框。 confirm:确认框。返回值有true …

数据治理实战——元数据管理

一、元数据概述 1.1 定义 描述数据的数据,本质还是数据。数据本身带有的技术属性与其在业务运行中的业务属性,称其为元数据,例如:表数据量,占用空间,字段信息,业务描述,负责人&…

计算机视觉实验五——图像分割

计算机视觉实验五——图像分割 一、实验目标二、实验内容1.了解图割操作,实现用户交互式分割,通过在一幅图像上为前景和背景提供一些标记或利用边界框选择一个包含前景的区域,实现分割①图片准备②代码③运行结果④代码说明 2.采用聚类法实现…

单调队列(C/C++)

引言: 单调队列和单调栈都是一种数据结构,应用十分广泛,在蓝桥杯、ICPC、CCPC等著名编程赛事都是重点的算法,今天博主将自己对单调栈与单调队列的理解以及刷题的经验,用一篇博客分享给大家,希望对大家有所…

在线拍卖系统|基于Springboot的在线拍卖系统设计与实现(源码+数据库+文档)

在线拍卖系统目录 基于Springboot的在线拍卖系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台: 2、后台 用户功能模块 5.2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a…

使用脚本部署openstack平台

两台虚拟机,compute和controller 建议两台虚拟机都配置,内存4G,硬盘60G,网络要在虚拟机设置这里添加一个网络适配器,第一个是主机模式192.168.10.0,第二个是NAT模192.168.20.0, 可以在此处了解一…

Unity Standalone File Browser,Unity打开文件选择器

Unity Standalone File Browser,Unity打开文件选择器 下载地址:GitHub链接: https://github.com/gkngkc/UnityStandaloneFileBrowser简单的示例代码 using SFB; using System; using System.IO; using UnityEngine; using UnityEngine.UI;…

从三大层次学习企业架构框架TOGAF

目录 前言 掌握TOGAF的三个层次 层次1:怎么学? 层次2:怎么用? 层次3:怎么思? 结束语 前言 对于一名架构师来讲,如果说编程语言是知识库层次中的入门石,那么企业架构框架则相当…

cesium加载倾斜影像数据(模拟雨、雪、雾、无人机飞行、测距、箭头标绘、电子围栏等)

实现效果如下: 功能菜单如下: 加载倾斜影像核心代码: var palaceTileset new Cesium.Cesium3DTileset({url: http://127.0.0.1:9002/tileset.json,//控制切片视角显示的数量,可调整性能maximumScreenSpaceError: 0.1,maximumNum…

python/pygame 挑战魂斗罗 笔记(三)

感觉最难的部分已经解决了,下面开始发射子弹。 一、建立ContraBullet.py文件,Bullit类: 1、设定子弹速度 Config.py中设定子弹移动速度为常量Constant.BULLET_SPEED 8。 2、载入子弹图片: 图片也是6张,子弹发出后…

OceanBase数据库日常运维快速上手

这里为大家汇总了从租户创建、连接数据库,到数据库的备份、归档、资源配置调整等,在OceanBase数据库日常运维中的操作指南。 创建租户 方法一:通过OCP 创建 确认可分配资源 想要了解具体可分配的内存量,可以通过【资源管理】功…

Unity 对APK签名

关键代码 PS D:\UnityProject\YueJie> jarsigner -verbose -keystore D:\UnityProject\YueJie\user.keystore -signedjar D:\UnityProject\YueJie\meizuemptyapk-release-signed.apk D:\UnityProject\YueJie\MeizuEmpty-release-unsigned.apk 1 示例 # jarsigner的命令格…

【C++从练气到飞升】08---模板

🎈个人主页:库库的里昂 ✨收录专栏:C从练气到飞升 🎉鸟欲高飞先振翅,人求上进先读书。 目录 一、泛型编程 什么是泛型编程: 二、函数模板 1. 函数模板概念 2. 函数模板格式 3. 函数模板的原理 4. 函数模板的实例…

Ubuntu 传输文件

scp [选项] 源文件 目标路径 以下是一些常用的 scp 命令选项: -r:递归复制目录和子目录。 -P:指定远程 SSH 服务器的端口号。 -i:指定用于身份验证的私钥文件。 -p:保留源文件的时间戳、权限和所有者。 -v&#x…

element-ui合计逻辑踩坑

element-ui合计逻辑踩坑 1.快速实现一个合计 ​ Element UI所提供的el-table中提供了方便快捷的合计逻辑实现: ​ https://element.eleme.cn/#/zh-CN/component/table ​ 此实现方法在官方文档中介绍详细,此处不多赘述。 ​ 这里需要注意&#xff0c…