【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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【YOLOv9】使用yolov9训练自己的数据集/验证 /推理 /参数分析

完胜V8的SOTA模型Yolov9(论文阅读笔记)内容 点击即可跳转 当今的YOLO系列武林盟主YOLOV9: YOLOv9的优秀表现: 环境: ubuntu20.04,无GPU,使用anaconda3创建的虚拟环境yolov9。 环境安装: conda create -n …

JavaSE图书管理系统

JavaSE图书管理系统 思路一.Main方法二.User包1.User类2.NormaUser类3.AdminUser类三.book包1.BookList类2.Book类四.operation包1.IOPeration接口2.AddOperation类新增图书3.BorrowOperation类借阅图书4.DelOperation类删除图书5.FindOperation类查找图书6.ReturnOperation类归…

Centos7配置IP地址

1、找到网卡名字 使用root用户登陆,输入命令 ifconfig 2、打开配置文件 输入命令,打开配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 3、添加IP地址 3.1修改BOOTPROTO 将“BOOTPROTOdhcp” 改为 “BOOTPROTOstatic” 3.2添加IP地址 在配…

【JavaEE多线程】从单例模式到线程池的深入探索

目录 多线程案例单例模式阻塞队列定时器线程池总结-保证线程安全的思路对比线程和进程 多线程案例 单例模式 单例模式是一种设计模式 设计模式,就是程序员的棋谱,这里介绍了很多典型场景,以及典型场景的处理方式,按照设计模式写…

火车头采集一键发布到Zblog

火车头采集发布到Zblog系统,主要操作步骤如下: 目录 1、Zblog火车头Web发布模块 2、内容发布参数映射,火车头发布到Zblog 3、简数一键发布到Zblog方法 1、Zblog火车头Web发布模块 自行编写Zblog火车头Web发布模块,一般要使用f…

Linux--进程间的通信--进程池

进程间的通信–匿名管道 进程池的概念 进程池是一种将多个进程组织起来以执行特定任务的机制。它由多个预先创建好的资源进程和一个管理进程组成。这些资源进程被管理进程负责分配和调度,用于处理任务。 当有新的任务提交时,管理进程会从进程池中取出一…

2024北京门窗展|2024北京门窗展会|2024北京门窗展览会

CWE中国(北京)国际系统门窗及幕墙博览会 CWE China(Beijing)International System Doors Windows and Curtain Walls Expo 2024年8月29-31日 北京,中国国际展览中心顺义馆 展会概况: 2024年CWE中国&…

【Unity】ScriptableObject 在游戏中的使用实例

ScriptableObject 在游戏中的使用实例 ScriptableObject 使用指南Unity 存储游戏数据的几种方法Unity ScriptableObject实例创建一个物品管理的ScriptableObject创建一个管理所有 ScriptableObject 的数据库(ItemDBSO) ScriptableObject 使用指南 Scrip…

回溯算法练习day.2

216.组合总和III 链接:. - 力扣(LeetCode) 题目描述: 找出所有相加之和为 n 的 k 个数的组合,且满足下列条件: 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相…

基于STM32的RFID智能门锁系统

本文针对RFID技术,着重研究了基于单片机的智能门锁系统设计。首先,通过链接4*4按键模块与主控STM32,实现了多种模式,包括刷卡开锁、卡号权限管理、密码开锁、修改密码、显示实时时间等功能。其次,采用RC522模块与主控S…

【C语言基础】:预处理详解(二)

文章目录 一、宏和函数的对比二、#和##运算符2.1 #运算符2.2 ##运算符 三、#undef四、命令行定义五、条件编译六、头文件的包含1. 头文件包含的方式2. 嵌套文件包含 上期回顾: 【C语言基础】:预处理详解(一) 一、宏和函数的对比 宏通常被应有于执行简单…

Vue3---基础10(路由)

写一个最基本的路由导航 下载、创建、使用路由 下载路由 npm i vue-router 创建路由 先在 src 内去创建一个 router 文件夹 在文件夹内创建一个 index 文件 index.ts 内代码 // 创建一个路由器,并暴露出去 // 引入createRouter import { createRouter, createWeb…

CSS使用自己的字体

在项目的根目录下的static文件夹中放置字体文件。在项目中使用这个字体,需要2个步骤。 一. 你需要在全局样式文件中引入它。 假设你的全局样式文件是App.vue或者App.vue中引入的App.scss文件,你可以像这样引入字体文件: font-face {font-fa…

深度学习体系结构——CNN, RNN, GAN, Transformers, Encoder-Decoder Architectures算法原理与应用

1. 卷积神经网络 卷积神经网络(CNN)是一种特别适用于处理具有网格结构的数据,如图像和视频的人工神经网络。可以将其视作一个由多层过滤器构成的系统,这些过滤器能够处理图像并从中提取出有助于进行预测的有意义特征。 设想你手…

MySQL中的存储过程详解(上篇)

使用语言 MySQL 使用工具 Navicat Premium 16 代码能力快速提升小方法,看完代码自己敲一遍,十分有用 拖动表名到查询文件中就可以直接把名字拉进来中括号,就代表可写可不写 目录 1.认识存储过程 1.1 存储过程的作用 1.2 存储过程简介…

C#基础|数据类型、变量

哈喽,你好啊,我是雷工! 01 数据类型 数据类型是为了方便存储数据的,为了将数据按照不同的分类存储,所以引入数据类型。这个在PLC中已经很熟悉了。 数据类型的作用:就是为了更好地管理内存,为…

顺序表 (头删 尾删 清空)

//头删 | 1 #include "head.h" | 1 #ifndef ww87 void head_del(p lp) | 2 int main(int argc, const char *argv[]) …

[C++][算法基础]求最小生成树(Kruskal)

给定一个 n 个点 m 条边的无向图,图中可能存在重边和自环,边权可能为负数。 求最小生成树的树边权重之和,如果最小生成树不存在则输出 impossible。 给定一张边带权的无向图 G(V,E),其中 V 表示图中点的集合,E 表示图…

民航电子数据库:[E14024]事务内变更操作次数超过最大许可值10000,可通过系统参数max_trans_modify适当调整限制

目录 一、场景二、异常情况三、原因四、排查五、解决 一、场景 1、对接民航电子数据 2、执行delete语句时报错 二、异常情况 三、原因 通过报错信息就可以看出,是系统参数max_trans_modify配置导致 当删除的数据量 > max_trans_modify时,删除就会…

Visual studio项目默认“Header Files”、“Source Files”等过滤器消失后展开的方法。

使用Visual Studio进行项目开发创建默认工程的解决方案资源管理器里查看项目文件,所有的文件是按照其所属的类型自动归类,例如:.h头文件自动划归到Header Files文件夹,.cpp文件自动划归到Source Files文件夹下,如下图所…