微信小程序 保存图片

在微信小程序中要保存图片到本地相册，需要获取相册权限。总之整个功能实现下来需要如下几个小程序的API：wx.getSetting，wx.authorize，wx.openSetting，wx.downloadFile，wx.saveImageToPhotosAlbum

wx.getSetting
获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
wx.authorize
提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。更多用法详见 用户授权。 > 小程序插件可以使用 wx.authorizeForMiniProgram
wx.openSetting
调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
wx.downloadFile(Object object)
下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。
wx.saveImageToPhotosAlbum
保存图片到系统相册。

wxml部分

<button  type="primary" bindtap="downloadImg" style="margin-top:50rpx">下载图片</button>

普通下载图片（部分安卓手机会存在下载失败）

 //下载图片
  downloadImg(){
  	let that= this;
    wx.downloadFile({
      url: that.data.imgUrl,//图片的地址
      success:function(res){
        const tempFilePath = res.tempFilePath  //通过res中的tempFilePath 得到需要下载的图片地址
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,  //设置下载图片的地址
          success:function(){
          }
        })
      }
    })
  },
  

wx.downloadFile 保存图片的时候，打印成功回调里边会有tempFilePath 后缀名不正确格式。（Android机会有这种情况，iOS不清楚），就回导致后续wx.saveImageToPhotosAlbum方法是出现错误：文件格式类型错误问题

安卓下载失败解决方案

downloadImg() {
    wx.showLoading({
      title: '保存中...'
    })
    let that= this;
	const url = wx.env.USER_DATA_PATH + "/" + new Date().getTime().toString()+ that.data.imgsArr[i].slice(that.data.imgsArr[i].lastIndexOf('.'))
    wx.downloadFile({ //下载文件资源到本地
      url: that.data.url, // 网络图片的地址 这里是需要下载的图片地址！！！
      filePath: url ,
      success: function (res) {
        if (res.statusCode === 200) {
          wx.saveImageToPhotosAlbum({
            filePath: res.filePath,
            success: function (data) {
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              })
 
              let fileMgr = wx.getFileSystemManager()
              fileMgr.unlink({
                filePath: res.filePath,
                success: () => {
                  console.log('删除缓存成功!')
                }
              })
            },
            fail: function (err) {
              if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
                //当初用户拒绝，再次发起授权
                wx.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  showCancel: false,
                  success: () => {
                    wx.openSetting({
                      success(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)
                      }
                    })
                  }
                })
              }
            },
            complete(res) {
              console.log(res);
              wx.hideLoading()
            }
          })
        }
      }
    })
  }

图片文件流显示并下载
有时请求接口后端返回的图片格式不是一个完整的url,也不是其他直接能显示的图片格式，而是直接一张图片，即返回为文件流的格式。需要对这个数据进行如下处理：

getImg(){
	let that = this 
	wx.request({
	    url: that.data.url,
	    responseType: 'arraybuffer', //将数据转为类似二进制数组的格式
	    success:res=>{
	        //进行转码
	        let url = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)
	        that.setData({
	            imgUrl:url
	        })
	    }
	 })
}

图片途径已经转成已经base64,直接下载必然失败。在原有图片下载的基础上，判断是否为base64，如果是则按照文件下载那样解码后下载，如果不是那么用普通下载即可

  //判断base64并下载图片
  downloadImg() {
  let that = this 
    var save = wx.getFileSystemManager();
    var number = Math.random();
    //判断是否为base64
    if( that.data.imgUrl.includes("base64")){  
      save.writeFile({
        filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',
        data: that.data.imgUrl.replace('data:image/png;base64,', ''),
        encoding: 'base64',
        success: res => {
          wx.saveImageToPhotosAlbum({ //保存为png格式到相册
            filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',
            success: function (res) {
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000, //提示的延迟时间，单位毫秒，默认：2500
              })
            },
            fail: function (err) {
              wx.hideLoading()
            }
          })
        },
        fail: err => {
          console.log(err)
        }
      })
    }else{
      wx.downloadFile({
        url: that.data.imgUrl,//图片的地址
        success:function(res){
          const tempFilePath = res.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,  //设置下载图片的地址
            success:function(){
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000, //提示的延迟时间，单位毫秒，默认：2500
              })
            },
            fail: function (err) {
              wx.hideLoading()
            }
          })
        }
      })
    }
  },

注意

在开发者工具和手机打开调试都可以成功保存图片，但是关了调试，就不可以保存。这个时候需要登录到微信小程序后台(开发->开发设置)，查看downloadFile合法域名 中有没有配置合法域名，也就是下载图片路径的白名单，你的图片路径域名需要在这里配置，才可以！然后就可以保存图片！！！

小程序其他知识点

小程序上传图片

微信小程序自动检测版本并提示更新新版本