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

news2024/11/23 12:22:04

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

  • 微信小程序图片转发保存简单说明
  • 网络图片的转发保存
  • 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.coloradmin.cn/o/1605345.html

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

相关文章

Elasticsearch Windows上安装

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能…

python二级题目-仅使用 Python 基本语法,即不使用任何模块,编写 Python 程序计算下列数学表达式的结果并输出,小数点后保留 3 位。

x(((3**4)5*(6**7))/8)**0.5 .format 用法一: print({}.format(1)) 1 print(这个是format的用法{}。。。.format(3)) 这个是format的用法3 ’大括号1:{},大括号2:{},大括号3:{}‘.format(3,4,5) print(’大括号1:{},大括号2:{},大括号3:{}‘.form…

github,raw.githubusercontent.com 等网址登陆不上不去的设置方法

目录 提示域名解析错误: 出现的现象: 解决办法:修改host host改完不生效 解决方案1: 解决方案2: 提示域名解析错误: 出现的现象: 登陆github,raw.githubusercontent.com 等网…

Vue接收接口返回的mp3格式数据并支持在页面播放音频

一、背景简介 在实际工作中需要开发一个转音频工具,并且能够在平台页面点击播放按钮播放音频 二、相关知识介绍 2.1 JS内置对象Blob Blob对象通常用于处理大量的二进制数据,可以读取/写入/操作文件、音视频等二进制数据流。Blob表示了一段不可变的二…

第21天:信息打点-公众号服务Github监控供应链网盘泄漏证书图标邮箱资产

第二十一天 一、开发泄漏-Github监控 1.短期查看 1.密码搜索 根据攻击目标的域名在GitHub上进行搜索密码,如果目标网站的文件与搜索到的源码相关,那就可以联想目标网站是否使用这套源码进行开发 原理就是开发者在上传文件的时候忘记更改敏感文件或者…

Arduino源代码(ino)在Proteus中调试总结

一、前言 基于BluePill Plus开发板(该板是毕设网红板) BluePill Plus / WeAct Studio 微行工作室 出品 BluePill-Plus/README-zh.md at master WeActStudio/BluePill-Plus GitHub 首页-WeAct Studio-淘宝网 (taobao.com) 在Proteus中对应的例子是&…

解决vue启动项目报错:npm ERR! Missing script: “serve“【详细清晰版】

目录 问题描述问题分析和解决情况一解决方法情况二(常见于vue3)解决方法情况三解决方法 问题描述 在启动vue项目时通常在控制台输入npm run serve 但是此时出现如下报错: npm ERR! Missing script: "serve" npm ERR! npm ERR! T…

优思学院|分析过程能力Cpk时出现双峰是什么原因?

当你在分析过程能力指数Cpk时,遇到了数据分布呈现出双峰的情况,这通常意味着什么呢?让我们一探究竟。 在统计分析中,如果一个数据集中的频率分布图显示出两个明显的峰值,这种现象被称为双峰分布。这意味着数据可能来源…

vim相关指令

vim的各种模式及其转换关系图 vim 默认处于命令模式!!! 模式之间转换的指令 除【命令模式】之外,其它模式要切换到【命令模式】,只需要无脑 ESC 即可!!! [ 命令模式 ] 切换至 [ 插…

pyskl手势/动作识别的实现与pytorch cuda环境部署保姆教程

恭喜你,找到这篇不需要翻墙就能够成功部署的方法。在国内布置这个挺麻烦的,其他帖子会出现各种问题不能完全贯通。便宜你了。。 实话5年前我用1080训练过一个基于卷积和ltsm的手势识别,实话实说感觉比现在效果好。是因为现在的注意力都在tra…

CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)

前言:在我们学习CSS的时候,主要学习选择器和常用的属性,而这篇文章讲解的就是最基础的属性——颜色。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 目录 1.颜色属性 【1】使用颜色关键词表…

JVM修炼之路【10】- 垃圾回收器和垃圾回收算法

垃圾回收算法 我们先简要看一下 四种主要的垃圾回收算法 看到这不禁感慨一下 人家1960年 都搞出GC算法了 太强了 评价标准 既然有这么多算法 那就跟各个牌子的游戏本一样 有个比较,这里我们重点介绍一下 垃圾回收算法的评价标准 这几个标准非常重要是 是后面理解很…

python基础——类【类的定义和使用、魔术方法】

📝前言: python中的类,自我感觉在某种程度上和C语言的结构体是有共同之处的,如果有兴趣,可以先看看这篇文章:C语言——结构体类型(一),先了解一下C语言中的结构体&#x…

Linux debian gdb dump

1.开发背景 记录 debian 下应用程序崩溃调试方法 2.开发需求 程序越界可以定位到越界的位置附近 3.开发环境 debian 操作系统,如果不支持需要查看是否存在对应的可执行文件 4.实现步骤 4.1 设置 dump 输出大小 ulimit -c unlimited # 设置输出大小 生成core 文…

算力租赁还能如此便宜?怎么现在才告诉我!

作为拥有几年炼丹经验的“炼丹侠”,总会遇到这样的问题:入手过超贵的显卡,性能不稳定,还不能及时更新适配!传输速度慢,算力不稳定,大大影响任务执行效率!数据存储费用高,…

基于FPGA的OMEGA东京奥运会计时器

截至2019年共举办了31届奥运会,其中27届的计时设备都由欧米茄(OMEGA,Ω)提供,今年的东京奥运会将会是第28届。 瑞士计时公司(Swiss Timing)基于火星Mars ZX2核心板打造了为奥运会等大型体育赛事…

支付宝支付之SpringBoot整合支付宝创建自定义支付二维码

文章目录 自定义支付二维码pom.xmlapplication.yml自定义二维码类AlipayService.javaAlipayServiceImpl.javaAlipayController.javaqrCode.html 自定义支付二维码 继&#xff1a;SpringBoot支付入门 pom.xml <dependency><groupId>org.springframework.boot<…

批量人脸画口罩

网上参考的修改了一下&#xff0c;图片放在根目录&#xff0c;命名叫做1.png&#xff0c;批量人脸画口罩 这个程序的目的是为了解决人脸数据集中的特征点缺失的不足 # -*- coding: utf-8 -*- import os import numpy as np from PIL import Image, ImageFile__version__ 0.3…

前端请求404,后端保无此方法

1、微信小程序前端路径404 2、后端报无此路径 3、查看路径下对应的方法 发现忘了在list方法前加GetMapping(“/list”)&#xff0c;加上即可

中伟视界:智慧矿山智能化预警平台功能详解

矿山智能预警平台是一种高度集成化的安全监控系统&#xff0c;它能够提供实时的监控和报警功能&#xff0c;帮助企业和机构有效预防和响应潜在的安全威胁。以下是矿山智能预警平台的一些关键特性介绍&#xff1a; 报警短视频生成&#xff1a; 平台能够在检测到报警时自动生成短…