小程序图片保存入坑指南

小程序保存到相册的坑点

• 需求整理
• 利用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部分:

<div>
	<image 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根据需求相应解决。

来源：CSDN

作者：情破

链接：https://blog.csdn.net/u014106478/article/details/89629913