小程序中制作分享海报canvasToImg

开发微信小程序时，业务需求要求做个分享海报的功能，so：

var canvasToImg = {
  //分享图片
  shareGoodsImg: function(params = {}){
    
    let src = params.src || "";
    let imgWidth = 750;
    let imgHeight = 750;
    if (!src) { return false }
    
    var data = new Promise((resolve, reject) => {
      canvasToImg.getCanvasImg({
        src: src,
        price: params.price ? params.price : "0.00",
      }).then(function (res) {
        resolve(res);
      }).catch(function (err) {
        console.log(err)
      })
      
    })
    return data;
    
  },
  //分享海报
  shareGoodsPosterImg(params = {}){
    let src = params.src || "";
    if (!src) { return false }
    var data = new Promise((resolve, reject) => {
      canvasToImg.getCanvasPosterImg({
        src: params.src,
        name: params.name || "",
        price: params.price ? params.price : "0.00",
        codeUrl: params.codeUrl || "",
      }).then(function (res) {
        resolve(res);
      }).catch(function (err) {
        console.log(err)
      })
    })
    return data;
  },
  getCanvasPosterImg(params={}) {
    
    const ctx = wx.createCanvasContext('canvasPoster');

    let windowWidth = wx.getSystemInfoSync().windowWidth;
    let scale = windowWidth / 750;

    //文字超出截取
    ctx.__proto__.wrapText = function (text, x, y, maxWidth, lineHeight) {
      if (typeof text != "string" || typeof x != "number" || typeof y != "number") {
        return false;
      }
      if (!maxWidth || typeof maxWidth == "undefined") {
        maxWidth = (this._context.canvas && this._context.canvas.width) || 600 * scale;
      }
      if (!lineHeight || typeof lineHeight == "undefined") {
        lineHeight = 40 * scale;
      }
      let textArr = text.split("");
      let lineText = "";
      for (let i in textArr) {
        let templine = lineText + textArr[i];
        let templineWidth = ctx.measureText(templine).width;
        if (templineWidth > maxWidth && i > 0) {
          ctx.fillText(lineText, x, y);
          lineText = textArr[i];
          y += lineHeight;
          console.log(y)
        } else {
          lineText = templine;
        }
      }
      ctx.fillText(lineText, x, y);
    }

    //商品图片
    ctx.setFillStyle("#ffffff");
    ctx.fillRect(0, 0, 600 * scale, 950 * scale);
    ctx.drawImage(params.src, 0, 0, 600 * scale, 600 * scale);
    ctx.save();
    ctx.restore();
    //头像
    // ctx.beginPath()
    // ctx.arc(35,305,15,0,2*Math.PI);
    // ctx.clip();
    // ctx.drawImage(this.data.icon, 20, 290, 30, 30);
    // ctx.restore()

    //名称
    // ctx.setFontSize(12)
    // ctx.setFillStyle("#999999")
    // ctx.fillText('米斯特 为您推荐：', 60, 305);

    //商品标题
    ctx.setFontSize(14)
    ctx.setFillStyle("#000000")
    ctx.wrapText(params.name, 20 * scale, 640 * scale, 560 * scale, 40 * scale);
    ctx.save();

    //金额
    ctx.setFillStyle("#DE4646");
    ctx.setFontSize(14);
    ctx.fillText("￥", 20 * scale, 730 * scale);
    ctx.setFontSize(18);
    ctx.fillText(params.price, 50 * scale, 730 * scale);
    ctx.save();

    //划掉金额
    // ctx.setFontSize(12);
    // ctx.setFillStyle("#999999");
    // ctx.fillText("￥150.00", 100, 383);
    // ctx.setLineWidth(0.3);
    // ctx.moveTo(100, 380);
    // ctx.lineTo(155, 380)
    // ctx.stroke()

    //横线
    ctx.setLineWidth(0.1);
    ctx.moveTo(20 * scale, 750 * scale);
    ctx.lineTo(580 * scale, 750 * scale);
    ctx.setStrokeStyle('#333333');
    ctx.stroke();
    ctx.save();

    //底部文字
    ctx.setFontSize(12)
    ctx.setFillStyle("#999999")
    ctx.fillText("长按识别小程序，立即购买", 40 * scale, 820 * scale);
    ctx.save();

    //底部二维码
     ctx.drawImage(params.codeUrl, 440 * scale, 760 * scale, 120 * scale, 120 * scale);
    ctx.save()
    //let _this = this;
    var data = new Promise((resolve, reject) => {
      ctx.draw(false, function () {
        wx.canvasToTempFilePath({
          canvasId: 'canvasPoster',
          fileType: "jpg",
          quality: 1,
          success(res) {
            resolve(res);
          },
          fail: function (err) {
            reject(err);
          }
        })
      })
    })
    return data;

  },
  getCanvasImg: function (params){
    var data = new Promise((resolve, reject) => {
      const ctx = wx.createCanvasContext("canvas");
      let windowWidth = wx.getSystemInfoSync().windowWidth;
      let scale = windowWidth/750;
      let [ww, hh,fhh] = [500 * scale, 350 * scale, 400*scale];
      ctx.setFillStyle("#ffffff");
      ctx.fillRect(0, 0, ww, fhh);
      ctx.save();
      ctx.restore();
      ctx.drawImage(params.src, 0, 0, ww, hh);
      ctx.setFillStyle('#DE4646');
      ctx.setFontSize(14);
      ctx.fillText('￥', 10 * scale, hh + 40 * scale);
      ctx.setFontSize(18);
      ctx.fillText(params.price, 36 * scale, hh + 40 * scale);
      ctx.save();
      ctx.draw(false, function () {
        wx.canvasToTempFilePath({
          canvasId: 'canvas',
          fileType: "jpg",
          quality: 1,
          success(res) {
            resolve(res);
          },
          fail: function (err) {
            reject(err);
          }

        })
      })
    })
    return data;
  },

};

module.exports = canvasToImg;

调用时， 引入方法

imgport "canvasToImg" from "XXX"
canvasToImg.shareGoodsPosterImg({
	src: "imgurl",//图片地址
	name: "name",//分享的产品名称
	price: "price",//价格
	codeUrl: "codeUrl"//小程序二维码地址（base64）,
}).then(function (res) {
	//生成的海报地址
	console.log(res.tempFilePath)

})