微信小程序把頁面做成圖片分享

開發(fā)微信小程序的時候，經常要遇到如上圖這樣的，保存小程序二維碼圖片的分享功能。

網上找了很多都沒有具體的寫法，于是自己看官方文檔寫了一個，分享一下。

首先，需要在 wxml 中 創(chuàng)建一個 畫板 canvas 。

wxml :

<view class='more' bindtap='saveImageToPhotosAlbum'>保存圖片</view>   //保存圖片按鈕
<canvas canvas-id='share' style='width:100vw;height:90vh;' hidden='{{canvasHidden}}'></canvas>

    //這里的 canvas-id 后面要用的上。
    //style里的寬高要用上，不設置寬高畫板會失效。
    //canvasHidden是控制畫板顯示隱藏的參數，畫板直接設置display none，會導致失效。

data :

   data: {
        canvasHidden:true,     //設置畫板的顯示與隱藏，畫板不隱藏會影響頁面正常顯示
        avatarUrl: '',         //用戶頭像
        nickName: '',          //用戶昵稱
        wxappName: app.globalData.wxappName,    //小程序名稱
        shareImgPath: '',   
        screenWidth: '',       //設備屏幕寬度
        description: app.globalData.description,    //獎品描述
        FilePath:'',           //頭像路徑
    },

js :

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

  },

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯成都公司！

標題名稱：微信小程序把頁面做成圖片分享
URL鏈接：http://www.muchs.cn/news9/326209.html

成都網站建設公司_創(chuàng)新互聯，為您提供靜態(tài)網站、企業(yè)建站、網站排名、關鍵詞優(yōu)化、響應式網站、網站改版

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯