微信小程序-canvas繪制圖片

由於小程序無法分享到朋友圈，所以想分享到朋友圈的話，我們只能生成一張海報了。

這時，我們就要用canvas來繪制圖片

一、創建canvas容器

// 展示圖片，並保存到本地
<view class='imagePathBox' v-if="showPoster">
   <image v-if="imagePath" :src="imagePath" class='shengcheng'></image>
   <view v-if="imagePath == ''" class="poster_ing">海報生成中...</view>
   <view class='baocun' @tap='baocun'>保存相冊，分享到朋友圈</view>
   <image src="/static/icon_oc_close.png" class="post_close" @tap="closePoster"></image>
</view>
// canvas容器
<view class="canvas-box">
   <canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>

二、服務端獲取小程序二維碼

為什么說是服務端獲取小程序碼呢，因為微信公眾平台是不允許將 https://api.weixin.qq.com 域名綁定到服務請求白名單中的

getCode: function() {
  let that = this
  let channelId = compress(app.globalData.channelId)
  let custId = compress(this.custInfo.custId)
  let customId = compress(that.customId)
  let str = channelId + '/' + custId + '/' + customId
　// 這里需要說明下，scene是page后接的參數，而且有效長度為32位，超過是無法生碼的，所以一定要控制長度
  // 因為我要傳遞的參數剛好是純數字，所以我的方法是把原來的十進制轉化成了32進制，在取參的時候再轉化下即可
  // 當然如果需要的數據量比較大話，也可以將數據存到后台，只把id傳過去即可
　// accessToken的獲取可以看下微信小程序的API
  uni.request({
    url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.accessToken,
    data: {
       scene: str,
       page: "pages/personal/routerSharePage/routerSharePage"
    },
    method: "POST",
    responseType: 'arraybuffer', //設置響應類型
    success(res) {
　　　　// 轉化為base64位
      var codeSrc = uni.arrayBufferToBase64(res.data); //對數據進行轉換操作
      that.setData({
        codeSrc: codeSrc
      })
      that.createNewImg()
    },
    fail(e) {
      console.log(e)
    }
   })
 },

三、繪制canvas

createNewImg: function() {
  var that = this;
　// 因為base64不能直接生成圖片，所以需要轉成本地圖片
  let pathCode = "data:image/png;base64," + this.codeSrc
  const fsm = wx.getFileSystemManager();
  const FILE_BASE_NAME = 'tmp_base64src';
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(pathCode) || []
  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFileSync( filePath, buffer, 'binary')

  /* 創建容器 */
  var context = uni.createCanvasContext('mycanvas');
  /* 主體背景色 */
  context.setFillStyle("#ffffff")
  /* 背景色填充區域 */
  context.fillRect(0, 0, 375, 667)

  //將模板圖片繪制到canvas,在開發工具中drawImage()函數有問題，不顯示圖片
  context.drawImage(this.headerImg, 0, 0, 375, 421);
  /* 繪制標語 */
  let text1 = '我的線路我做主'
  let text2 = '我是線路合伙人，為我助力吧'
  context.setFontSize(24)
  context.setFillStyle("#181818")
  context.setTextAlign('center')
  context.fillText(text1, 185, 467)
  context.stroke()

  context.setFontSize(18)
  context.setFillStyle("#4D4D4D")
  context.setTextAlign('center')
  context.fillText(text2, 185, 500)
  context.stroke()

  /* 畫虛線 */
  context.lineWidth = 3
  context.strokeStyle = "#4D4D4D"
  context.beginPath()
  context.setLineDash([18.5, 4])
  context.moveTo(37.5, 525)
  context.lineTo(337.5, 525)
  context.stroke()
  /* 小程序二維碼 */
  context.drawImage(filePath, 41, 547, 82, 82);
  /* 小程序描述 */
  let text3 = '分享來自北京定制公交升級版'
  let text4 = '長按識別小程序立即參與'

  context.setFontSize(15)
  context.setFillStyle("#181818")
  context.setTextAlign('left')
  context.fillText(text3, 140, 579)
  context.stroke()

  context.setFontSize(14)
  context.setFillStyle("#4D4D4D")
  context.setTextAlign('left')
  context.fillText(text4, 140, 610)
  context.stroke()
  context.draw();
  //將生成好的圖片保存到本地，需要延遲一會，繪制期間耗時
  setTimeout(function() {
    uni.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function(res) {
   　　   var tempFilePath = res.tempFilePath;
         uni.hideLoading()
            that.setData({
              imagePath: tempFilePath,
              showPoster: true
         });
      },
      fail: function(res) {
         console.log(res);
      }
   });
  }, 200);
},

四、保存圖片

baocun: function() {
   uni.showLoading({
      title: '正在下載',
   })
   if (this.imagePath.indexOf('https') > -1) {} else {
      this.imagePath = this.imagePath.replace('http', 'https')
    }
    uni.saveImageToPhotosAlbum({
       filePath: this.imagePath,
       success(res) {
         uni.showModal({
            content: '圖片已保存到相冊，趕緊曬一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function(res) {
              if (res.confirm) {
                 uni.hideLoading()
              }
            },
            fail: function(res) {
               console.log(11111)
            }
         })
       }
    })
  },

ok，這樣就可以了，有問題可以留言