小程序 — 保存图片到手机相册①

简介: 讲一下在微信小程序中,怎么把网络图片保存到本机相册中;这个功能其实在小程序开发中还是很常见的,比如保存海报之类的等等。GitHub:https://github.com/Ewall1106/miniProgramDemo1、保存图片(1)要保存图片到手机相册中,所以首先我们来看看保存图片的api方法是什么?我们使用的是wx.saveImageToPhotosAlbum(OBJECT)这个api方法,其中OBJECT的参数可以是:图片来源自小程序官网请注意我红框标记的部分, 不支持网络图片路径。

讲一下在微信小程序中,怎么把网络图片保存到本机相册中;这个功能其实在小程序开发中还是很常见的,比如保存海报之类的等等。
GitHub:https://github.com/Ewall1106/miniProgramDemo

1、保存图片

(1)要保存图片到手机相册中,所以首先我们来看看保存图片的api方法是什么?
我们使用的是wx.saveImageToPhotosAlbum(OBJECT)这个api方法,其中OBJECT的参数可以是:

图片来源自小程序官网

请注意我红框标记的部分, 不支持网络图片路径

(2)于是我们照猫画虎简单的写一下

简单使用wx.saveImageToPhotosAlbum(OBJECT)

2、下载图片到本地

前面已经重点提到,由于wx.saveImageToPhotosAlbum(OBJECT)这个方法不支持网络图片,但是一般我们在项目中要下载的图片都是后端提供的,所以我们要把图片下载到本地。

(1)wx.downloadFile(OBJECT) 基本语法

  • OBJECT参数说明:

    图片来源自小程序官网

  • success返回函数:

    图片来源自小程序官网

(2)代码示例基本用法
使用方法很简单,copy一下官网的示例代码就就ok了:

wx.downloadFile(OBJECT)基本案例代码

3、实现保存图片到手机相册功能

于是,把下载图片后成功返回的tempFilePath临时路径赋给wx.saveImageToPhotosAlbum(OBJECT)filePath,就可以实现保存网络图片到本地了。

实现保存图片到手机相册功能代码
保存成功

4、案例代码

添加操作提示弹窗,全部的案例代码:

saveImage() {
  wepy.showLoading({
    title: '保存中...', 
    mask: true,
  });
  wx.downloadFile({
    url:
'http://upload.jianshu.io/admin_banners/web_images/4435/c1d3ca63353c8bd527f0d781605516cb5b266d02.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540',
    success: function(res) {
      if (res.statusCode === 200) {
        let img = res.tempFilePath;
        wx.saveImageToPhotosAlbum({
          filePath: img,
          success(res) {
            wepy.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail(res) {
            wepy.showToast({
              title: '保存失败',
              icon: 'success',
              duration: 2000
            });
          }
        });
      }
    }
  });
}
AI 代码解读

5、问题及优化

其实到上面部分就可以基本实现保存图片到手机相册的功能了,但是还有这么几个问题:

  • 如果用户第一次点击的时候,对弹出来的微信授权弹窗点击了拒绝,那么之后点击保存图片就没用了。

    如果用户第一次点击了拒绝授权

  • 手机打开调试模式可以保存图片,但是关闭调试模式就不能保存图片了。

目录
打赏
0
0
0
0
13
分享
相关文章
|
6月前
|
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
141 69
|
5月前
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
78 2
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
53 1
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1808 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
5月前
|
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
54 0
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
43 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    234
  • 2
    【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    5
  • 3
    美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
    15
  • 4
    【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    35
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    7
  • 6
    【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
    16
  • 7
    微信小程序与Java后端实现微信授权登录功能
    65
  • 8
    算法系统协同优化,vivo与港中文推出BlueLM-V-3B,手机秒变多模态AI专家
    21
  • 9
    让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
    63
  • 10
    让小程序开口说话:DeepSeek语音交互开发指南
    67
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等