1. 程式人生 > >微信小程式把頁面做成圖片分享【原創】

微信小程式把頁面做成圖片分享【原創】

onLoad: function (options) {
      var that = this
      var userInfo, nickName, avatarUrl
      //獲取使用者資訊,頭像,暱稱之類的資料
      wx.getUserInfo({
          success: function (res) {
              console.log(res);
              userInfo = res.userInfo
              nickName = userInfo.nickName
              avatarUrl = userInfo.avatarUrl
              that.setData({
                  avatarUrl: res.userInfo.avatarUrl,
                  nickName: res.userInfo.nickName,
              })
              wx.downloadFile({
                  url: res.userInfo.avatarUrl
              })
          }
      })
      //獲取使用者裝置資訊,螢幕寬度
      wx.getSystemInfo({
          success: res => {
              that.setData({
                  screenWidth: res.screenWidth
              })
              console.log(that.data.screenWidth)
          }
      })

//定義的儲存圖片方法
saveImageToPhotosAlbum:
  function () {
      wx.showLoading({
          title: '儲存中...',
      })
      var that = this;
      //設定畫板顯示,才能開始繪圖
      that.setData({
          canvasHidden: false
      })
      var unit = that.data.screenWidth / 375
      var path1 = "../images/bg3.png"
      var avatarUrl = that.data.avatarUrl
      console.log(avatarUrl + "頭像")
      var path2 = "../images/award.png"
      var path3 = "../images/qrcode.png"
      var path4 = "../images/headborder.png"
      var path5 = "../images/border.png"
      var unlight = "../images/unlight.png"
      var nickName = that.data.nickName
      console.log(nickName + "暱稱")
      var context = wx.createCanvasContext('share')
      var description = that.data.description
      var wxappName = "來「 " + that.data.wxappName + " 」試試運氣"
      context.drawImage(path1, 0, 0, unit * 375, unit * 462.5)
      //   context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50)
      context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 178)
      context.drawImage(path5, unit * 48, unit * 120, unit * 280, unit * 178)
      context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 178 , unit * 145, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32)
      context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32)
      context.drawImage(path3, unit * 20, unit * 385, unit * 55, unit * 55)
      //   context.drawImage(path4, 48, 200, 280, 128)
      context.setFontSize(14)
      context.setFillStyle("#999")
      context.fillText("長按識別小程式", unit * 90, unit * 408)
      context.fillText(wxappName, unit * 90, unit * 428)
      //把畫板內容繪製成圖片,並回調 畫板圖片路徑
      context.draw(false, function () {
          wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: unit * 375,
              height: unit * 462.5,
              destWidth: unit * 375,
              destHeight: unit * 462.5,
              canvasId: 'share',
              success: function (res) {
                  that.setData({
                      shareImgPath: res.tempFilePath
                  })
                  if (!res.tempFilePath) {
                      wx.showModal({
                          title: '提示',
                          content: '圖片繪製中,請稍後重試',
                          showCancel: false
                      })
                  }
                  console.log(that.data.shareImgPath)
                  //畫板路徑儲存成功後,呼叫方法吧圖片儲存到使用者相簿
                  wx.saveImageToPhotosAlbum({
                      filePath: res.tempFilePath,
                      //儲存成功失敗之後,都要隱藏畫板,否則影響介面顯示。
                      success: (res) => {
                          console.log(res)
                          wx.hideLoading()
                          that.setData({
                              canvasHidden: true
                          })
                      },
                      fail: (err) => {
                          console.log(err)
                          wx.hideLoading()
                          that.setData({
                              canvasHidden: true
                          })
                      }
                  })
              }
          })
      });
  },