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


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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JS跨域代码片段
Aug 30 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php5 图片验证码实现代码
2009/12/11 PHP
php存储过程调用实例代码
2013/02/03 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python中map()与zip()操作方法
2016/02/27 Python
Python装饰器基础详解
2016/03/09 Python
Python生成随机数组的方法小结
2017/04/15 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python短信轰炸的代码
2020/03/25 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
护士自我鉴定
2013/10/23 职场文书
承办会议欢迎词
2014/01/17 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
mysql部分操作
2021/04/05 MySQL