微信小程序实现保存图片到相册功能


Posted in Javascript onNovember 30, 2018

项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。废话不多说,直接上干货...

 

功能逻辑:

先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权。

上代码:

<view bindtap='save'>保存图片到相册</view>
//点击保存图片
 save () {
  let that = this
  //若二维码未加载完毕,加个动画提高用户体验
  wx.showToast({
   icon: 'loading',
   title: '正在保存图片',
   duration: 1000
  })
  //判断用户是否授权"保存到相册"
  wx.getSetting({
   success (res) {
    //没有权限,发起授权
    if (!res.authSetting['scope.writePhotosAlbum']) {
     wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success () {//用户允许授权,保存图片到相册
       that.savePhoto();
      },
      fail () {//用户点击拒绝授权,跳转到设置页,引导用户授权
       wx.openSetting({
        success () {
         wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
           that.savePhoto();
          }
         })
        }
       })
      }
     })
    } else {//用户已授权,保存到相册
     that.savePhoto()
    }
   }
  })
 },
//保存图片到相册,提示保存成功
 savePhoto() {
  let that = this
  wx.downloadFile({
   url: that.data.imgUrl,
   success: function (res) {
    wx.saveImageToPhotosAlbum({
     filePath: res.tempFilePath,
     success(res) {
      wx.showToast({
       title: '保存成功',
       icon: "success",
       duration: 1000
      })
     }
    })
   }
  })
 }

注:如果你不点击"保存到相册"的时候去看设置页,是没有"保存到相册"的开关的,只有点过了保存到相册,请求过这个弹窗授权后,设置页才会有"保存到相册"的开关

总结

以上所述是小编给大家介绍的微信小程序实现保存图片到相册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
js实现动态时钟
Mar 12 Javascript
js canvas实现写字动画效果
Nov 30 #Javascript
webpack打包多页面的方法
Nov 30 #Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php使用session二维数组实例
2014/11/06 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python实现猜单词小游戏
2020/05/22 Python
python3的输入方式及多组输入方法
2018/10/17 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
小学校长汇报材料
2014/08/20 职场文书
银行竞聘报告范文
2014/11/06 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
四十九个javascript小知识实用技巧
2021/11/20 Javascript