【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语句 查询所有,删除,添…

【头歌-Python】人机交互自学引导

禁止转载,原文:https://blog.csdn.net/qq_45801887/article/details/137425935 参考教程:B站视频讲解——https://space.bilibili.com/3546616042621301 如果代码存在问题,麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 人机交互翻转教学…

js BOM模型常用方法梳理

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

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

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

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

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

科目一笔记

扣分 目前只有 12 9 6 3 1分。 扣1分的 会车 不按照规定会车, 普倒掉(普通路上不按规定掉头,倒车) ​ 高速、城市快速路…以外的道路 普通路 ​ 校车…以外的道车 普通车 使用灯光 ​ 需要注意的是只有不按规定使用灯光&…

单调队列(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:怎么思? 结束语 前言 对于一名架构师来讲,如果说编程语言是知识库层次中的入门石,那么企业架构框架则相当…

CCF PTA 2022年7月C++研究生入学考试

【问题描述】 一年一度的研究生入学考试结束了,招生办的老师打算对所有的考生进行 成绩排名,从而确定复试的名单。排名的规则如下: (1)以入学考试的平均成绩 作为排名的依据(分数均为整数); (2)对于考生…

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

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

问题:如何避免子组件传入相同对象时更新

场景 我有一个父组件,里面包含一个子组件,子组件传入了一个对象,假设对象是字面量。当我的父组件更新时,子组件也会更新。导致不必要的渲染。 一些尝试 1.通过使用React.memo包裹子组件,作用是父组件更新&#xff0…

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

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

【MySQL面试题pro版-8】

MySQL是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的RDBMS (Relational Database Management System,关系数据…

Swagger3 使用示例

Swagger3 使用示例 GET 请求,传递 query-string 参数 Operation(summary "GET 请求", description "GET 请求传递 query-string 参数", tags {"用户管理"}) GetMapping(value "/get-query-string", produces "…