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

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

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

wxml :

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

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

data :

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

js :

onLoad: function (options) {
      var that = this
      var userInfo, nickName, avatarUrl
      //獲取用戶信息，頭像，昵稱之類的數(shù)據(jù)
      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
              })
          }
      })
      //獲取用戶設(shè)備信息，屏幕寬度
      wx.getSystemInfo({
          success: res => {
              that.setData({
                  screenWidth: res.screenWidth
              })
              console.log(that.data.screenWidth)
          }
      })

//定義的保存圖片方法
saveImageToPhotosAlbum:
  function () {
      wx.showLoading({
          title: '保存中...',
      })
      var that = this;
      //設(shè)置畫板顯示，才能開始繪圖
      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 + " 」試試運(yùn)氣"
      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("長按識(shí)別小程序", unit * 90, unit * 408)
      context.fillText(wxappName, unit * 90, unit * 428)
      //把畫板內(nèi)容繪制成圖片，并回調(diào) 畫板圖片路徑
      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: '圖片繪制中，請(qǐng)稍后重試',
                          showCancel: false
                      })
                  }
                  console.log(that.data.shareImgPath)
                  //畫板路徑保存成功后，調(diào)用方法吧圖片保存到用戶相冊(cè)
                  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
                          })
                      }
                  })
              }
          })
      });

  },

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

標(biāo)題名稱：微信小程序把頁面做成圖片分享
URL鏈接：http://redsoil1982.com.cn/news9/326209.html

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

廣告

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