小程序---canvas畫圖，生成分享圖片，畫圖文字換行

小程序目前只支持轉發，不支持分享朋友圈，為了能實現分享，很多線上小程序通過生成分享圖片，保存到相冊來給用戶增加分享的可能。

具體思路及簡要代碼如下：

一：canvas畫圖
  drawCanvas:function(){
    var that = this;
    var contentPic = '/images/[e-mail]'
    wx.downloadFile({     //當圖片為網絡圖片時，需要先下載到本地，再進行操作，
      url: contentPic,        //否則canvas會加載不到圖片，本地的無需這步驟
      success: function (res) {
        contentPic = res.tempFilePath
      }
    })
    var  ctx = wx.createCanvasContext('shareImg')
    ctx.fillStyle = '#fff'    //這里兩句是為了解決canvas生成圖片時黑背景的問題
    ctx.fillRect(0, 0, 562, 788)   //填充白色背景
    ctx.setFontSize(32)
    ctx.setFillStyle('#333')  
    ctx.setTextAlign('left')
    ctx.setTextBaseline('middle')
    var str = '這是標題'
    this.changLine(true,str,ctx,40,60,36,482)
    var sourse = that.data.detail.source
    ctx.setFontSize(28)
    ctx.fillText(sourse, 40, this.data.titleY)
    var date = that.data.detail.publishDate
    var sourseX = ctx.measureText(sourse).width+56
    ctx.setFontSize(24)
    ctx.setFillStyle('#999')
    ctx.fillText(date, sourseX, this.data.titleY)
    var content = that.data.detail.summary.replace(/(^\s*)|(\s*$)/g, "")
    ctx.setFontSize(28)
    ctx.setFillStyle('#666')
    this.changLine(false,content, ctx, 40, this.data.titleY + 60, 36, 482)
    var picY = this.data.titleY + 168
    wx.getImageInfo({
      src: contentPic,
      success: function (res) {
        var widthScale = 482 / res.width
        var heightScale = 250 / res.height
        var sx=0,sy=0
        if (widthScale>heightScale){
          sy=  (res.height-250/(482 / res.width))/2
        }
        else{
          sx=(res.width-482/(250 / res.height))/2
        }
        ctx.drawImage(contentPic, sx, sy, res.width - sx * 2, res.height - sy * 2, 40, picY, 482, 250 )
       ctx.moveTo(40, picY + 274)
       ctx.setStrokeStyle('#dedede')
       ctx.lineTo(522, picY + 274)
       ctx.stroke() 
       ctx.setFontSize(28)
       ctx.setFillStyle('#666')
       ctx.fillText('長按掃碼閱讀', 40, picY + 334)
       ctx.setFontSize(24)
       // ctx.setFillStyle('#666')
       ctx.fillText('全文約' + that.data.detail.wordCount + '字，約' + that.data.detail.readingTime + '分鍾', 40, picY + 382)
       // var qrcode = '/images/[e-mail]'
       // ctx.drawImage(qrcode, 344, picY + 274, 178, 178)
       var logo = '/images/[e-mail]'
       ctx.drawImage(logo, 397, picY + 315, 72, 72)
       ctx.draw(false, function (e) {
         that.createPoster()
       }
       )
      }
    })
   
  },
  //畫圖文字換行，內容、畫布、初始x、初始y、行高、畫布寬
  changLine: function (isTitle,str, ctx, initX, initY, lineHeight, canvasWidth){
      
    // 字符分隔為數組
    var arrText = str.split('');
    var line = '';
    var lineCount=0;
    var isThreeLine=false;
    for (var n = 0; n < arrText.length; n++) {
      var testLine = line + arrText[n];
      var testWidth = ctx.measureText(testLine).width;
      if (testWidth > canvasWidth) {
        if (lineCount==2) {
          isThreeLine=true
          var length = line.length-2;
          line = line.substring(0, length)+'...';
          ctx.fillText(line, initX, initY);
          return false;
        }
        lineCount++;
      
        ctx.fillText(line, initX, initY);
        line = arrText[n];
        initY += lineHeight;
       
      } else {
        line = testLine;
      }
      
    }
    if (!isThreeLine){
      ctx.fillText(line, initX, initY);
    }
      //記錄標題的高度
    if (isTitle){
      this.setData({
        titleY: initY + lineHeight + 8
      })
      }
  },

 

//生成海報
  createPoster:function(){
    var that = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 562,
      height: 788,
      destWidth: 1124,
      destHeight: 1576,
      canvasId: 'shareImg',
      fileType: 'jpg',
      success: function (res) {
        that.setData({
          prurl: res.tempFilePath
        })
        wx.hideLoading()
      }
    })
  },

大概就這樣，若發現問題，請評論指正~