Angbike个人博客 > WeChat > 微信小程序保存广告海报图到相册简单实现

微信小程序保存广告海报图到相册简单实现

项目开发过程中,需要用户将自己的二维码推广图片保存到手机相册,第一时间考虑使用canvas画布来生成相关海报图片,用小程序api保存到相册,因保存的图片上面带有个人相关动态参数信息,为减少前端加载时间,后改变为后端生成图片,前端调用接口方式保存。
1、wxml代码:

<button type="button" bindtap="saveUserQrcode">保存为图片</button>

2、js代码:

  /**
   * 保存二维码推广图片 检查是否授权
   */
  saveUserQrcode: function() {
    let that = this;
    wx.showToast({
      icon: 'loading',
      title: '正在保存图片',
      duration: 1000
    })
    //是否授权相册
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
          that.savePhoto();
        } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.savePhoto();
            },
            fail() {
              common.showToast('');
              wx.showToast({
                title: '您没有授权,无法保存到相册',
                icon: "none"
              })
            }
          })
        } else {
          wx.openSetting({
            success(res) {
              if (res.authSetting['scope.writePhotosAlbum']) {
                that.savePhoto();
              } else {
                wx.showToast({
                  title: '您没有授权,无法保存到相册',
                  icon: "none"
                })
              }
            }
          })
        }
      }
    })
  },

  /**
   * 调用图片接口 返回base64
   */
  savePhoto: function() {
    let that = this;
    let url = 接口地址;
    let header = { 'Authorization': 'Bearer ' + token, 'content-type': 'application/x-www-form-urlencoded' };
    let data = { 'userId': 123 };
    common.WechatRequest(url, data, header, 'GET', 'json', 'text', res => {
      if (res.data.code == 200) {
        let imgSrc = res.data.data; // 此处接口返回为base64 不带base64图片头(data:image/jpg;base64,) 如返回图片头需要截取
        let save = wx.getFileSystemManager();
        let number = Math.random();
        save.writeFile({
          filePath: wx.env.USER_DATA_PATH + '/test' + number + '.jpg',
          data: imgSrc,
          encoding: 'base64',
          success: res => {
            wx.saveImageToPhotosAlbum({
              filePath: wx.env.USER_DATA_PATH + '/test' + number + '.jpg',
              success: function (res) {
                wx.showToast({
                  title: '保存到相册成功',
                  icon: "success",
                  duration: 1500
                })
              }
            });
          },
          fail: function (res) {
            if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
              wx.openSetting({
                success(settingdata) {
                  if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                    console.log("获取权限成功,再次点击图片保存到相册")
                  } else {
                    console.log("获取权限失败")
                  }
                }
              })
            }
          }
        });
      } else if (res.data.code == 400) {
        common.showToast(res.data.message);
        return false;
      } else {
        common.showToast('');
        wx.showToast({
          title: '二维码保存失败',
          icon: "none"
        })         
        return false;
      }
      wx.hideLoading();
    }, null, null);
  }

备注:common.WechatRequest方法为自定义封装的wx.request请求,使用时替换即可;

博客评论已关闭