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


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 相关文章推荐
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python实现函数极小值
2019/07/10 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
详解Python中namedtuple的使用
2020/04/27 Python
python中的django是做什么的
2020/07/31 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
总经理助理职责
2014/02/04 职场文书
房地产项目策划书
2014/02/05 职场文书
小学生安全演讲稿
2014/04/25 职场文书
班级课外活动总结
2014/07/09 职场文书
优秀团员事迹材料
2014/12/25 职场文书
暑假安全保证书
2015/02/28 职场文书
庆七一活动简报
2015/07/20 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers