小程序---canvas画图，生成分享图片，画图文字换行

Posted 2020-11-19 lichunchun

小程序目前只支持转发，不支持分享朋友圈，为了能实现分享，很多线上小程序通过生成分享图片，保存到相册来给用户增加分享的可能。

具体思路及简要代码如下：

一：canvas画图
  drawCanvas:function(){
    var that = this;
    var contentPic = ‘/images/[email protected]‘
    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/[email protected]‘
       // ctx.drawImage(qrcode, 344, picY + 274, 178, 178)
       var logo = ‘/images/[email protected]‘
       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()
      }
    })
  },

大概就这样，若发现问题，请评论指正~