小程序保存到相册的坑点

• 需求整理
• 利用base64方法进行图片缓存
• 网络图片下载方式保存图片
• 写在最后的话

需求整理

小程序的项目中应用到了保存图片分享到朋友圈的功能，刚开始以为不是很难，后来也是踩了一些坑，这里特此记录下来，以便查阅。

利用base64方法进行图片缓存

小程序文档中关于图片保存应用到了wx.saveImageToPhotosAlbum的api，其中文件的路径不支持网络路径，后台返回的是base64的格式这里我们需要将其转换。参考base64转为图片保存

相关代码如下：

      /*         无关代码略       */ var path  = wx.env.USER_DATA_PATH; //定义图片临时路径为微信全局路径 var fileManager = wx.getFileSystemManager();//文件系统api let startIdx = this.Img.indexOf('base64,') + 7; let timestamp = new Date().getTime(); fileManager.writeFile({            filePath: `${wx.env.USER_DATA_PATH}/test/${timestamp}.png`,            data: this.qrcode.slice(startIdx),            encoding: 'base64',            success: res = {               console.log("图片写入成功");               wx.saveImageToPhotosAlbum({                  filePath:`${wx.env.USER_DATA_PATH}/test/${timestamp}.png`,                  success:res={                   console.log("成功保存图片");                  }               })           },           fail:err={           }

这里保存图片当base64字符串过大的时候微信后台会包尺寸过大的问题，解决的办法可以使用浏览器内置了编码解码的函数：window.btoa（） 和 window.atob（，将较大的字符串转为普通串写入。

网络图片下载方式保存图片

当后台返回给我们的是图片的地址的时候，可以将图片下载为临时文件路径保存。
html部分:

divimage src="{{saveImg}}" /button @tap="createBill"生成海报/button/div

js部分

   /*     request为ajax请求的封装可以忽略   */  createBill() {       /*              生成海报要判断是否有权限操作，没有则需要打开授权相册功能。            */var that = this;if (!this.saveImg) {wepy.showToast({title: "请等待海报生成",image: '../img/fail.png',duration: 2000})}wx.getSetting({success: function(res) {console.log("auth");console.log(res);if (!res.authSetting["scope.writePhotosAlbum"]) {wx.openSetting({success(settingdata) {console.log(settingdata)if (settingdata.authSetting["scope.writePhotosAlbum"]) {console.log("获取权限成功，再次点击图片保存到相册")} else {console.log("获取权限失败")}}})}}})wx.saveImageToPhotosAlbum({filePath: this.saveImg,success: function(res) {wepy.showToast({title: "海报保存成功",icon: 'success',duration: 2000})},fail(res) {wx.openSetting({success(settingdata) {console.log(settingdata)if (settingdata.authSetting["scope.writePhotosAlbum"]) {console.log("获取权限成功，再次点击图片保存到相册")} else {console.log("获取权限失败")}}})if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {}}})   },   created:()   {      request({url:"您的url",method: 'POST',data:{ test:'test'}}).then( res={   this.img = res;   wx.downloadFile({   success:tempImg={     this.saveImg = tempImg.tempFilePath   },   fail:err ={   }   });})   } 

写在最后的话

 基于小程序开发一些功能虽然受制于人，但是我们可以通过其提供的api根据需求相应解决。