先来看小程序中的保存图片到相册的api

wx.saveImageToPhotosAlbum({
filePath : "./test.png", //这个只是测试路径,没有效果
success(res) {
console.log("success");
},
fail : function(res) {
console.log(res);
}
})

上面的saveImageToPhotosAlbum的用法是不能获取到文件的,因为filePath在官方的说法是可以是临时文件路径或永久文件路径。

而"filePath : ./test.png"只是一个相对路径(相对小程序项目来说的一个路径),而我们需要的是临时文件路径或永久文件路径。

下面说一下三者的区别:

相对路径:小程序项目中相对的文件路径。

临时文件路径:从网络上下载或其他形式生成的文件,但是只保存在内存中,没有保存到小程序目录中的文件路径。

永久文件路径:小程序项目中文件中的全文件路径。

注:相对路径和永久文件路径可能是同一个文件,只是引用的路径名不一样而已(一个是相对的,一个是绝对的)。

其中临时文件路径我们可以这样获得来保存文件到相册:

wx.downloadFile({
url: 'https://example.com/audio/123', //仅为示例,并非真实的资源
success: function (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存图片成功!',
})
},
fail(res) {
wx.showToast({
title: '保存图片失败!',
})
}
})
}
}
})

用downloadFile只可以获取网络上的图片资源;而getImageInfo则是全能类型,不管是网络上的图片资源,还是小程序中保存的图片。

官方上的说法:getImageInfo的src参数的图片路径可以是相对路径、临时文件路径、存储文件路径(即上面说的全路径)、网络图片路径。

wx.downloadFile({
url: 'https://example.com/audio/123', //仅为示例,并非真实的资源
success: function (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存图片成功!',
})
},
fail(res) {
wx.showToast({
title: '保存图片失败!',
})
}
})
}
}
})

总结:wx.getImageInfo功能更加强大;但是downloadFile则更加专业,因为downloadFile可以读取下载进度等功能。

微信小程序保存图片到相册的更多相关文章

  1. 微信小程序 保存图片

    微信小程序 保存图片 注: 此处使用的是小程序 wepy框架, 原生或其他的请注意转换写法 <div class="handle"> <button class= ...

  2. 微信小程序仿手机相册组件——简单版

    仿手机相册的微信小程序组件,具备点击图片预览,长按图片出现多选框功能,读者可以根据自己的需求,依据现有数据进行删除等操作.话不多说,先看效果: 初始效果:  长按效果: 选择效果: 注意:当前只是简单 ...

  3. 微信小程序保存图片功能实现

    小程序保存图片功能实现 wxml: <view class="previewImage" style="display:{{previewImage}}" ...

  4. 微信小程序保存图片的方法

    1.xhtml代码 长按保存: <view class="img" catchlongpress='baocun'></view> 2.Js代码 baocu ...

  5. uniapp保存图片到本地(APP和微信小程序端)

    uniapp实现app端和微信小程序端图片保存到本地,其它平台未测过,原理类似. 微信小程序端主要是权限需要使用button的开放能力来反复调起,代码如下: 首先是条件编译两个平台的按钮组件: < ...

  6. 微信小程序绘制分享图

    微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序学习记录(一)

    如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :nul ...

随机推荐

  1. clear read-only status问题的解决

    IDEA系工具可能会报出的错误. 解决方法见官方文档吧:Changing Read-Only Status of Files  : https://www.jetbrains.com/help/ide ...

  2. 模仿天猫实战【SSM】——总结

    第一篇文章链接:模仿天猫实战[SSM版]--项目起步 第二篇文章链接:模仿天猫实战[SSM版]--后台开发 总结:项目从4-27号开始写,到今天5-7号才算真正的完工,有许多粗糙的地方,但总算完成了, ...

  3. R语言学习 第十篇:操作符

    运算符是R语言中最基础的存在,熟悉运算符的使用,是熟练使用R处理数据的基础,操作符,顾名思义,是对数据进行运算的符号,R有自己的一套操作符,实现变量的赋值,引用,运算等功能. 一,赋值符号 为变量赋值 ...

  4. (转)TCP协议与UDP协议的区别

    TCP协议与UDP协议的区别    首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...

  5. java8完全解读二

    继续着上次的java完全解读一 继续着上次的java完全解读一1.强大的Stream API1.1什么是Stream1.2 Stream操作的三大步骤1.2.1 创建Stream1.2.2 Strea ...

  6. DevOps之二 Maven的安装与配置

    CentOS7 安装Maven 一.安装Maven mkdir -p /usr/local/maven3wget http://mirrors.hust.edu.cn/apache/maven/mav ...

  7. 分析DuxCms之AdminController

    /** * 后台模板显示 调用内置的模板引擎显示方法, * @access protected * @param string $templateFile 指定要调用的模板文件 * @return v ...

  8. .NET之AutoMapper对象映射工具运用

    AutoMapper对象映射工具:主要是将某一个实体转成另一个实体. 1.引用NuGet包;搜索:AutoMapper 2.创建实体类 using System; using System.Colle ...

  9. python_特殊函数

    __new__() 类的静态方法,用于确定是否要创建对象__init__() 构造函数,生成对象时调用__del__() 析构函数,释放对象时调用__add__() +__sub__() -__mul ...

  10. .net自定义错误页面实现

    前言: 在实际的web开发中,经常会遇到以下情况,导致给用不好的体验: a.程序未处理的异常,直接输出显示到用户页面 b.用户访问的资源不存在,直接显示系统默认的404页面 c.其它以下请求错误状态的 ...