当前位置: 首页 > article >正文

咸虾米壁纸微信小程序下载图片到相册saveImageToPhotosAlbum功能修改

当我将咸虾米壁纸这个项目进行重构的时候,想要将图片资源变得小一点,所以在上传图片的时候均采用了webp格式的,这样就导致再预览页面下载图片的时候出错了,之前使用的是uni.getImageInfo()这个API,该API不支持webp图片格式获取临时地址,所以这篇文章将getImageInfo方法改成uni.downloadFile()方法便可解决。
在这里插入图片描述

在这里插入图片描述

原来的方法

原文链接:https://blog.csdn.net/qq_18798149/article/details/135871140


//点击下载
const clickDownload = async () => {
	try {
		uni.showLoading({
			title: "下载中...",
			mask: true
		})
		let res = await downPushData();
		if(res.errCode != 0) throw res;			
		// #ifdef MP || APP				
		uni.getImageInfo({
			src: crtWallInfo.value.picurl,
			success: function(res) {					
				var path = res.path;
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success(res) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功,可去相册查看',
							icon: "none",
							duration:2000
						})							
					},
					fail(err) {
						uni.hideLoading();
						if(err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
							uni.showToast({
								title: '保存失败,请重新点击下载',
								icon: "none"
							})
							return;
						}							
						uni.showModal({
							title: '提示',
							content: '需要您授权保存相册',
							showCancel: false,
							success:res=>{
								if(res.confirm){
									uni.openSetting({
										success(settingdata) {
											if (settingdata.authSetting['scope.writePhotosAlbum']) {
												uni.showToast({
													title:'获取权限成功',
													icon:"none"
												})													
											}else{
												uni.showToast({
													title:'获取权限失败',
													icon:"none"
												})													
											}
											
										}
									})
								}
							}
						})
					},
					complete(err) {
						
					}
				})
			}
		})
		// #endif

		// #ifdef H5
		//调用预览图片的方法		
		uni.previewImage({
			urls: [crtWallInfo.value.picurl],
			current: 0, //点击图片传过来的下标
			success: (res) => {
				uni.showToast({
					title: '请长按保存',
					icon: "none",
					duration: 2000
				})
			}
		})
		// #endif

	} catch (err) {			
		console.log(err);
		uni.hideLoading();
	}
}

上面这个方法,通过uni.getImageInfo()无法获取webp格式,所以进行改造,使用uni.downloadFile()这个API,不过这个API返回的参数和上面有差异,注意对比。

修改后代码

//点击下载
const clickDownload = async () => {
	if(!gotoLogin()) return;
	let {_id,classid} = currentInfo.value;		
	
	// #ifdef H5
	let feedback = await showModal({content:"请长按保存壁纸"})
	if(feedback == 'confirm') actionCloudObj.writeDownload({picid:_id,classid})
	// #endif

	// #ifndef H5
	try {
		uni.showLoading({
			title: "下载中...",
			mask: true
		})			
		uni.downloadFile({
			url: currentInfo.value.picurl,
			success: (res) => {
				console.log(res);
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: (res) => {
						uni.showToast({
							title: "保存成功,请到相册查看",
							icon: "none"
						})
						actionCloudObj.writeDownload({picid:_id,classid})
					},
					fail: err => {
						if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
							uni.showToast({
								title: '保存失败,请重新点击下载',
								icon: "none"
							})
							return;
						}
						uni.showModal({
							title: "授权提示",
							content: "需要授权保存相册",
							success: res => {
								if (res.confirm) {
									uni.openSetting({
										success: (setting) => {
											console.log(
												setting);
											if (setting
												.authSetting[
													'scope.writePhotosAlbum'
													]) {
												uni.showToast({
													title: "获取授权成功",
													icon: "none"
												})
											} else {
												uni.showToast({
													title: "获取权限失败",
													icon: "none"
												})
											}
										}
									})
								}
							}
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				})

			},
			fail(err) {
				console.log(err);
			}
		})

	} catch (err) {
		console.log(err);
		uni.hideLoading();
	}
	// #endif
}

该方法同时也给uni.downloadFile增加了fail错误的执行方法,在之前代码中忘了加这个错误的返回值了,所以找了半天原因才知道uni.getImageInfo不支持webp格式。

注意:
uni.downloadFile()该API传递的参数是url,这个是你服务器返回的地址,success返回的临时地址,放在tempFilePath属性内,使用uni.saveImageToPhotosAlbum()存入相册时,注意改一下filePath=res.tempFilePath。

如果文章帮助到你,请记得给点赞支持一下哦。


http://www.kler.cn/a/449781.html

相关文章:

  • 109.【C语言】数据结构之求二叉树的高度
  • 【Rust自学】5.3. struct的方法(Method)
  • 掌握命令行参数的艺术:Python的`argparse`库
  • Java设计模式 —— 【结构型模式】外观模式详解
  • 深入解析 Spring Bean 配置与装配:从基础到进阶的实用指南
  • 0009.基于springboot+layui的ERP企业进销存管理系统
  • PLSQL 客户端连接 Oracle 数据库配置
  • 算法day_3数组中的单一元素和二进制位颠倒
  • autMan奥特曼机器人-相关命令
  • 【漏洞复现】F5 BIG-IP Next Central Manager SQL注入漏洞(CVE-2024-26026)
  • (10)YOLOv8算法基本原理
  • EasyPlayer.js播放器在React项目中应如何使用?
  • Jenkins Api Token 访问问题
  • MySQL 数据备份与恢复详解
  • 压缩为zip和gzip工具类
  • MySQL快速扫描
  • ios按键精灵脚本开发:ios悬浮窗命令
  • PHP中替换某个包或某个类
  • Linux 软硬链接详解:深入理解与实践
  • Ubuntu下ESP32-IDF开发环境搭建
  • C++ 虚函数、虚函数表、静态绑定与动态绑定笔记
  • 记录--uniapp 安卓端实现录音功能,保存为amr/mp3文件
  • Blazor项目中使用EF读写 SQLite 数据库
  • 在Ubuntu上通过Docker部署NGINX服务器
  • 第三节:GLM-4v-9B数据加载之huggingface数据加载方法教程(通用大模型数据加载实列)
  • 96 vSystem