微信小程序之canvas繪制海報分享到朋友圈

繪制canvas內容

首先，需要寫一個canvas標簽，給canvas-id命名為shareBox

<canvas canvas-id="shareBox"></canvas>

其次，我們就要根據需求（效果圖如下）在canvas上面繪制內容了，我這里canvas指的是紅框里面的內容

然后開始繪制內容啦，先定義一個繪制內容的方法：drawImage

drawImage() {
    //繪制canvas圖片
    var that = this;
    console.log(that.data.userInfo);
    var qrPath = that.data.qrcode_temp; //小程序碼本地路徑
    var imgLogo = that.data.photoTempath; //微信頭像本地路徑
    var banner = that.data.banner_temp; //展會bannertu的本地路徑
    var bgimg = "/images/[e-mail]"; //背景圖
   
    //創建一個canvas對象
    const ctx = wx.createCanvasContext('shareBox', this);

    ctx.setFillStyle("white");
    var canvasWidth = that.data.width; //自適應寬 15     var canvasHeight = that.data.height - that.data.footHeight;  //自適應高 (減去底部高度) 16     
    console.log(canvasWidth + "--" + canvasHeight)
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
    ctx.drawImage(bgimg, 10, 10, canvasWidth-20, canvasHeight-20);

    //繪制分享標題
   
    ctx.setFontSize(15);
    ctx.setFillStyle('#000');
    ctx.setTextAlign('left');
    ctx.fillText(that.data.userInfo.nickName+"邀請您一起參加", 110, 50, canvasWidth-135);
    var title = that.data.exhibitionDetail.ExName;
    if (title.length > 17) {
      var a = title.substr(0, 17);
      var b = title.substr(17, title.length);
      ctx.fillText(a, 110, 70, canvasWidth - 135);
      ctx.fillText(b, 110, 90, canvasWidth - 135);
    }else{
      ctx.fillText(title, 110, 70, canvasWidth - 135);
    }
    

    //繪制標題
    ctx.setFontSize(15);
    ctx.setTextAlign('left');
    ctx.setFillStyle('#000');
    ctx.fillText(title, 30, 250, canvasWidth - 60);
    ctx.fillText(title, 30, 250, canvasWidth - 60);

    //繪制時間
    ctx.setFontSize(12);
    ctx.setTextAlign('left');
    ctx.setFillStyle('#333');
    var time = that.data.exhibitionDetail.StartTime+"至"+ that.data.exhibitionDetail.EndTime;
    ctx.fillText(time, 30, 270, canvasWidth - 60);

    //繪制地點
    ctx.setFontSize(12);
    ctx.setTextAlign('left');
    ctx.setFillStyle('#333');
    var place = that.data.exhibitionDetail.Place;
    ctx.fillText(place, 30, 290, canvasWidth - 60);

    //繪制圓形頭像
    ctx.save();
    ctx.beginPath();
    ctx.arc(65, 65, 35, 0, 2 * Math.PI,false);
    ctx.setStrokeStyle('#eee')
    ctx.stroke(); //畫了背景的話要先畫圓在裁剪才能有圓形圖片
    ctx.clip(); //裁剪
    ctx.drawImage(imgLogo, 30, 30, 70, 70);
    ctx.restore();


    //繪制banner圖
   // ctx.drawImage(banner, 15, 120, 150, 315);

    //繪制小程序碼圖
    //ctx.drawImage(banner, 70, 310, 100, 100);

    ctx.draw();

  }

代碼解釋：

　　一、關於畫圓形圖片

　　　　這里遇到的問題是： 繪制圓形圖片的時候需要裁剪，一開始我沒有繪制背景，直接裁剪的（就是沒有ctx.stroke()這一步也是能成功的畫出圓形圖片的）。

　　　　之后加了背景圖之后，就無效了，查看了許多資料得知有背景圖的情況下，需要先把圓畫出來，再裁剪才行，就是我上訴代碼中紅色備注中的寫法。

　　二、關於網絡圖片的應用

　　　　上述代碼中有注釋寫的是本地路徑，這個本地路徑就是網絡圖片對應的本地臨時路徑，如何拿到本地臨時路徑，得借助小程序內置方法：wx.downloadFile

　　　　用法如下：我這里是下載的用戶頭像，這里的res.temFilePath就是本地臨時路徑了

　　　　注：下載圖片的域名要在小程序后台的downloadFile里面加上才行

var that = this;
wx.downloadFile({
      url: that.data.userInfo.avatarUrl,
      success: function (res) {
        console.log('圖片：' + res.tempFilePath);
        that.setData({
          photoTempath: res.tempFilePath
        })
      }
})

　　三、關於canvas自適應屏幕

　　　　我這里是需要自適應的，一開始我是想着能不能用%來寫寬高，實踐之后發現是不行的，於是在小程序api中找到wx.getSystemInfo方法拿到設備的寬高

var that = this; 
wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        that.setData({
          width: res.windowWidth,
          height: res.windowHeight
        })
      }

　　　　獲取元素高度： 

var that = this;
const query = wx.createSelectorQuery();
query.select('.share-box').boundingClientRect();
query.exec(function (res) {
   that.setData({
      footHeight: res[0].height
   })
   console.log(that.data.footHeight)
})

　　四、小程序碼生成

　　　　前端調用后台接口獲取小程序碼，參數：page（小程序碼的跳轉頁面），id（頁面參數）

　　　　生成小程序碼后同樣需要獲取本地臨時路徑才能在canvas中繪制出來，

　　　　注：通過小程序碼進入的頁面，在onload方法里面可以得到一個參數：scene，這個屬性就是生成小程序碼的時候傳的那個頁面參數

上述代碼的實現效果如下：我這里的小程序碼和banner圖暫時沒有，而且數據也是瞎寫的，湊合看吧

canvas轉成圖片保存到相冊　　

canvasToImage() {
    var that = this; 
    //  canvas畫布轉成圖片
    wx.canvasToTempFilePath({
      quality: 1,
      fileType: 'jpg',
      canvasId: 'shareBox',
      success: function (res) {
        wx.hideLoading();
        console.log('11' + res.tempFilePath);
        that.setData({
          img_temp: res.tempFilePath
        })
        // wx.previewImage({
        //   current: res.tempFilePath, // 當前顯示圖片的http鏈接
        //   urls: [res.tempFilePath] // 需要預覽的圖片http鏈接列表
        // })
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res);
            wx.showModal({
              title: '',
              content: '圖片已保存到相冊，趕緊曬一下吧',
              showCancel: false,
              confirmText: '好的',
              confirmColor: '#72B9C3',
              success: function (res) {
                if (res.confirm) {
                  console.log('用戶點擊確定');
                }
                that.setData({
                  visible: false
                })
              }
            })
          },
          fail: function (res) {
            if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    that.saveImg(); //保存失敗嘗試再次保存 45                   } else {
                    console.log('獲取權限失敗，給出不給權限就無法正常使用的提示')
                  }
                }
              })
            }
          }
        })

      },
      fail: function (res) {
        console.log(res)
      }
    }, this)
  },

這樣就可以把canvas轉成圖片保存在本地了，分享朋友圈在相冊找圖就好了