uniapp小程序保存图片到相册

1,454 阅读2分钟

uniapp小程序中保存图片到相册,使用的是uni.saveImageToPhotosAlbum。参数如下

注意图片路径不能是网络图片路径。所以网络图片路径的需要转一下,wx.downloadFile或者uni.getImageInfo都可以。

uni.getImageInfo({            src:that.url          }).then(res=>{            console.log(res[1],'----')          })

从res中找返回的路径放到uni.saveImageToPhotosAlbum中filePath就可以了。

或者使用wx.downloadFile,成功后取res.filePath放到uni.saveImageToPhotosAlbum中filePath

wx.downloadFile({        url: that.url,//此处为接口返回的图片地址        filePath: filePath,        success: function (res) {          // 保存图片到系统相册          var imageUrl = res.filePath;//临时文件路径          uni.saveImageToPhotosAlbum({ //保存图片到系统相册            filePath: imageUrl,            success: (res) => {},            fail: function (err) {}          })          return        },        fail: function (res) {}      })

上边就可以实现最基本的保存图片功能了。但是保存图片时候需要获取用户权限,假如第一次用户拒绝了授权是保存不成功的,而且之后也不会再唤起授权弹窗。所以需要在保存失败时候引导用户通过wx.openSetting进行权限设置。这块有之前同事写的直接拿过来了。

完整代码:

//点击保存图片到相册    saveShareImg() {      uni.showToast({        title: '正在保存',        icon: 'none'      })      var that = this;      let fileName = new Date().valueOf();      let filePath = wx.env.USER_DATA_PATH + '/' + fileName + '.jpeg'      wx.downloadFile({        url: that.url,//此处为接口返回的图片地址        filePath: filePath,        success: function (res) {          // 保存图片到系统相册          console.log(res, 'res')          var imageUrl = res.filePath;//临时文件路径          uni.saveImageToPhotosAlbum({ //保存图片到系统相册            filePath: imageUrl,            success: (res) => {              console.log('图片保存成功');              uni.showToast({                title: '保存成功',                icon: 'none'              })            },            fail: function (err) {              console.log(err)              if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg ===                'saveImageToPhotosAlbum:fail auth deny' || err.errMsg ===                'saveImageToPhotosAlbum:fail authorize no response') {                // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用                wx.showModal({                  title: '提示',                  content: '需要您授权保存相册',                  showCancel: false,                  success: modalSuccess => {                    wx.openSetting({                      success(settingdata) {                        console.log('settingdata', settingdata)                        if (settingdata.authSetting[                          'scope.writePhotosAlbum']) {                          wx.showModal({                            title: '提示',                            content: '获取权限成功,再次点击按钮即可保存',                            showCancel: false                          })                        } else {                          wx.showModal({                            title: '提示',                            content: '获取权限失败,将无法保存到相册!',                            showCancel: false                          })                        }                      },                      fail(failData) {                        console.log('failData', failData)                      },                      complete(finishData) {                        console.log('finishData', finishData)                      }                    })                  }                })              }            }          })          return        },        fail: function (res) {        }      })    },

参考文章:官网:uniapp.dcloud.net.cn/api/media/i…

其他文章:blog.csdn.net/m0_60053251…