美文网首页
小程序的保存图片到相册的方法封装

小程序的保存图片到相册的方法封装

作者: 付出的前端路 | 来源:发表于2018-06-26 18:30 被阅读0次

    现在有一个需求:要在小程序里做一个分享朋友圈的功能。由于微信API暂时不支持分享朋友圈,于是想到另外一种方案,在微信小程序页面里先生成一个图片,这个图片里带二维码,然后再用这个图片发朋友圈,其他朋友就可以在朋友圈里识别这个二维码了。其中遇到的一些问题:

    1.图片的生成

    2.图片的下载

    3.图片的保存

    解决:

    1.图片生成:这个比较简单,给服务端传入一些参数,服务端返回一个图片URL地址就可以了。

    2.图片的下载:这个用到微信小程序的API:wx.downloadFile(OBJECT)

    这个api是下载文件,属于网络服务,微信规定在用到网络相关的API时需要进行服务器域名配置,简单说就是登录微信后台,把这个下载域名配置在后台中就可以了。

    3.图片的保存,这个图片保存在系统相册中,用到微信API:wx.saveImageToPhotosAlbum(OBJECT)

    保存图片到系统相册需要用户授权

    直接上代码:

    1.下载和保存图片到系统相册中的代码:

    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.保存相册的授权代码:

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

    转载来源:http://wengyoulong.iteye.com/blog/2397795

    相关文章

      网友评论

          本文标题:小程序的保存图片到相册的方法封装

          本文链接:https://www.haomeiwen.com/subject/vnldyftx.html