微信公众号开发

微信小程序实现保存图片(唤起用户授权)

本文主要是介绍微信小程序实现保存图片(唤起用户授权),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.实现效果

在这里插入图片描述

2.实现原理

2.1文档地址!!!保存图片,需要用户授权。

在这里插入图片描述
在这里插入图片描述

wx.saveImageToPhotosAlbum({
  success(res) { }
})

注意:保存的图片需要是临时文件路径或本地路径(不支持网络路径)

2.2 获取本地路径

wx.getImageInfo(Object object)

wx.getImageInfo({
  src: 'images/a.jpg',//==>图片的路径,支持网络路径、本地路径、代码包路径
  success (res) {
    console.log(res.path)//====>图片的本地路径
  }
})

2.3用户授权(需要 scope.writePhotosAlbum)

2.3.1获取用户授权设置

开发者可以使用 wx.getSetting 获取用户当前的授权状态。

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

在这里插入图片描述

2.3.2用户拒绝授权

用户拒绝授权,引导用户打开设置界面进行授权。
用户可以在小程序设置界面(「右上角」 - 「关于」 - 「右上角」 - 「设置」)中控制对该小程序的授权状态。开发者可以调用 wx.openSetting 打开设置界面,引导用户开启授权。
在这里插入图片描述
在这里插入图片描述

wx.openSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

2.3.3 提前发起授权请求

开发者可以使用 wx.authorize 在调用需授权 API 之前,提前向用户发起授权请求。
在这里插入图片描述

在这里插入图片描述

3.实现代码

//相机授权
  isAuthorize() {
    return new Promise((resolve, reject) => {
      wx.authorize({
        scope: 'scope.writePhotosAlbum'
      }).then(() => {
        resolve()
      }).catch(() => {
        wx.getSetting().then(res => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.showModal({
              title: '是否授权保存到相册',
              content: '请确认授权,否则无法保存到相册',
              success: res => {
                if (res.confirm) {
                  wx.openSetting()
                }
              }
            })
          }
        })
      })
    })
  },
 // 下载图片
  downloadImg() {
    let {
      poster
    } = this.data;
    // 下载文件不支持网络路径,需要先将网络路径转换为
    this.isAuthorize().then(() => {
      wx.getImageInfo({
        src: poster,
        success: (res) => {
          let path = res.path;
          wx.saveImageToPhotosAlbum({
            filePath: path,
            success: (res) => {
              util.toolsFn.toastMsg('保存成功!')
              this.setData({
                show_poster: true
              })
            },
            fail: (res) => {
              util.toolsFn.toastMsg('保存失败')
            }
          })
        },
        fail(res) {
          util.toolsFn.toastMsg('保存失败')
        }
      })
    })
  }

4.更多小程序源码,关注苏苏的码云,一起学习,共同进步。

这篇关于微信小程序实现保存图片(唤起用户授权)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!