小程序 生成海报并保存到本地

部分代码

海报由后端生成 （二维码和背景图合成） 代码比较杂 需要哪部分看哪部分

 <!-- 下载图片 -->
  <view class="picPop" wx:if="{{isHide}}">
    <view class="pic">
      <image src="data:image/png;base64,{{sharePic}}"></image>
      <view class="icon" bindtap="closeBtn">
        <image src="http://cache.jiangxinxiaozhen.com/WD/APP/close.png"></image>
      </view>
    </view>
    <button bindtap="savePic">保存图片</button>
  </view>

  // 请求海报   1
  requestImg() {
    //  这些参数为生成的二维码需要带的参数 传给后端的 根据自己需求定
    let { rsShopId, head, nickName } = wx.getStorageSync('user')
    let houseid = this.data.liveList[0].roomid
    let data = {"data":{
      scene: rsShopId,
      page: 'pages/live/live',
      header: head,
      username: nickName,
      houseid: houseid
    }}
    let dat = signJs.getSign(data) // 加密 方式 非必需
    // console.log('dat',dat)
    wx.showLoading({
      title: '生成海报中...',
    })
    wx.request({
      data: dat,
      method: "POST",
      responseType: 'arraybuffer',
      url: 'https://XXX.com/Shop/DrawShareImages', 
      header: {"content-type": "application/x-www-form-urlencoded"},
      success:(res)=>{
        // console.log("header",res.header["Content-Type"])
        let header = res.header["Content-Type"]
        if (header == 'image/jpeg') {
          let imgSrc =  wx.arrayBufferToBase64(res.data);//base64编码
          this.setData({
            sharePic: imgSrc,
            isShow: false,
            isHide: true
          })
          // console.log("sharePic",this.data.sharePic)
          wx.hideLoading()
        } else {
          wx.showToast({
            title: '请重新生成...',
            icon: 'fail',
            duration: 2000,
            mask: true
          })
        }
      }
     })
  },
  
  // 保存图片
  savePic () {
    let that = this
    let isFirst = wx.getStorageSync('isFirst') || 0;
    // 用户授权
    wx.getSetting({
      success (res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: (res)=>{
              that.saveImage()
            },
            fail: ()=>{
              if (isFirst === 0) {
                wx.setStorageSync('isFirst', 1);
              } else {
                wx.openSetting({
                  success: (res)=>{}
                });
              }
            },
            complete: ()=>{}
          });
        } else {
          that.saveImage()
        }
      }
    })
  },
  
  // 封装保存图片到本地函数
  saveImage() {
    wx.showLoading({
      title: '保存中...',
    })
    let save = wx.getFileSystemManager();
    // console.log('save',save)
    let number = Math.random();
    // 删除缓存列表
    save.readdir({ // 获取文件列表
      dirPath: wx.env.USER_DATA_PATH,
      success(res) {
        // console.log('res',res)
       res.files.forEach((el) => {
        let name=(wx.env.USER_DATA_PATH+el).replace(/usr/g,"usr/");
         //删除时要注意文件名一定要和存的时候一样,不然会报没有unlink无文件权限问题
        save.unlink({
         filePath:name,
         fail(e) {
          console.log('readdir文件删除失败：', e)
         },
         success(succ){
          console.log('readdir文件删除成功：', succ)
         }
        });
       })
      }
     })
     
    //  保存图片
    save.writeFile({
      filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
      data: this.data.sharePic,
      encoding: 'base64',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
          success: function (res) {
            wx.hideLoading()
            wx.showToast({
              title: '保存成功',
              duration: 2000
            })
          },
          fail: function (err,e) {
            console.log(err,e)
            wx.showToast({
              title: '保存失败',
            })
            wx.hideLoading()
          }
        })
        // console.log(res)
      },
      fail: err => {
        console.log(err)
        wx.showToast({
          title: '保存失败',
        })
        wx.hideLoading()
      }
    })

  },
  // 这是之前自己生成的二维码 没有合成图片
  // // 生成小程序码
  // clickSetCode () {
  //   let that = this
  //   let accessToken = this.data.accessToken
  //   let roomId = 4
  //   let customParams = 123456
  //   wx.request({
  //     // url: `https://api.weixin.qq.com/wxa/getwxacode?access_token=${accessToken}`,// 接口A 适用于需要的码数量较少的业务场景
  //     // url: `https://api.weixin.qq.com/wxa/ge twxacodeunlimit?access_token=${accessToken}`,// 接口B 适用于需要的码数量极多的业务场景
  //     url: `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${accessToken}`,// 接口C 适用于需要的码数量较少的业务场景 生成二维码
  //     method: 'POST',
  //     responseType: 'arraybuffer',
  //     // 接口B 使用
  //     // data: {
  //     //   scene: '123&456',
  //     //   page:'pages/list/list'
  //     // },
  //     // 接口A C 使用
  //     data: {
  //       path:`pages/product/product?grouplogid=0&groupid=-1&sku=0000375&custom_params=${customParams}&type=9&open_share_ticket=1`
  //     },
  //     success: (res) => {
  //       console.log('小程序码',res)
  //       // console.log('小程序码',res.data)

  //   //     var imgSrc =  wx.arrayBufferToBase64(res.data);//base64编码
  //   // var save = wx.getFileSystemManager();
  //   // var number = Math.random();
  //   // save.writeFile({
  //   //   filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
  //   //   data: imgSrc,
  //   //   encoding: 'base64',
  //   //   success: res => {
  //   //     wx.saveImageToPhotosAlbum({
  //   //       filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
  //   //       success: function (res) {
  //   //         wx.showToast({
  //   //           title: '保存成功',
  //   //         })
  //   //       },
  //   //       fail: function (err) {
  //   //         console.log(err)
  //   //       }
  //   //     })
  //   //     console.log(res)
  //   //   }, fail: err => {
  //   //     console.log(err)
  //   //   }
  //   // })
  //       let url ='data:image/png;base64,'+ wx.arrayBufferToBase64(res.data)
  //       that.setData({
  //         imgurl: url
  //       })
  //       console.log('ToBase64',wx.arrayBufferToBase64(res.data))
  //       console.log('imgurl',this.data.imgurl)
  //     }
  //   })
  // },

  // 获取access_token密钥
  getAccessToken () {
    let that = this
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token',
      method: 'GET',
      data: {
        grant_type:'client_credential',
        appid: ' 自己的appid',
        secret: '自己的secret'
      },
      success: (res) => {
        this.setData({
          accessToken: res.data.access_token
        })
        // console.log('秘钥',res)
        that.getLiveList()
      }
    })
  },