首页 > 上网技巧 > 电脑小技巧 > 微信小程序保存图片到系统相册

微信小程序保存图片到系统相册

时间:2018-03-04 10:10 作者:QQ地带 我要评论

最近在做微信小程序,由于也是一边学习一边完成,把一些平时遇到的问题记录一下,方便以后查阅,也方便后面的人借鉴。
现在有一个需求:要在小程序里做一个分享朋友圈的功能。由于微信API暂时不支持分享朋友圈,于是想到另外一种方案,在微信小程序页面里先生成一个图片,这个图片里带二维码,然后再用这个图片发朋友圈,其他朋友就可以在朋友圈里识别这个二维码了。其中遇到的一些问题:
1.图片的生成
2.图片的下载
3.图片的保存
 
解决:
1.图片生成:这个比较简单,给服务端传入一些参数,服务端返回一个图片URL地址就可以了。
 
2.图片的下载:这个用到微信小程序的API:wx.downloadFile(OBJECT)
这个api是下载文件,属于网络服务,微信规定在用到网络相关的API时需要进行服务器域名配置,简单说就是登录微信后台,把这个下载域名配置在后台中就可以了。
 
3.图片的保存,这个图片保存在系统相册中,用到微信API:wx.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册需要用户授权
 
直接上代码:
1.下载和保存图片到系统相册中的代码:
Js代码  收藏代码
function downloadImage(imageUrl) {  
  // 下载文件  
  wx.downloadFile({  
    url: imageUrl,  
    success: function (res) {  
      console.log("下载文件:success");  
      console.log(res);  
  
      // 保存图片到系统相册  
      wx.saveImageToPhotosAlbum({  
        filePath: res.tempFilePath,  
        success(res) {  
          console.log("保存图片:success");  
          wx.showToast({  
            title: '保存成功',  
          });  
        },  
        fail(res) {  
          console.log("保存图片:fail");  
          console.log(res);  
        }  
      })  
    },  
    fail: function (res) {  
      console.log("下载文件:fail");  
      console.log(res);  
    }  
  })  
}  
 
2.保存相册的授权代码:
Js代码  收藏代码
onSavePicClick: function(){  
    console.log("onSavePicClick");  
    var downloadUrl = this.data.imageUrl;  
    console.log("downloadUrl=" + downloadUrl);  
  
    if (!wx.saveImageToPhotosAlbum) {  
      wx.showModal({  
        title: '提示',  
        content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'  
      })  
      return;  
    }  
  
    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope  
    wx.getSetting({  
      success(res) {  
        console.log("getSetting: success");  
        if (!res.authSetting['scope.writePhotosAlbum']) {  
          console.log("1-没有授权《保存图片》权限");  
            
          // 接口调用询问  
          wx.authorize({  
            scope: 'scope.writePhotosAlbum',  
            success(){  
              console.log("2-授权《保存图片》权限成功");  
               util.downloadImage(downloadUrl);  
            },  
            fail(){  
              // 用户拒绝了授权  
              console.log("2-授权《保存图片》权限失败");  
              // 打开设置页面  
              wx.openSetting({  
                success: function(data) {  
                  console.log("openSetting: success");  
                },  
                fail: function(data) {  
                  console.log("openSetting: fail");  
                }  
              });  
            }  
          })  
        } else {  
          console.log("1-已经授权《保存图片》权限");  
          util.downloadImage(downloadUrl)  
        }  
      },  
      fail(res) {  
        console.log("getSetting: success");  
        console.log(res);  
      }  
  
    })  
    
  },  
 

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告