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) { } }) },