仿拼多多小程序分享，卡片自定义图片（带商品信息）

需求：
商品详情页分享给好友，卡片上的图片为自定义的活动页，如图所示

image.png

方案一：网上查了下，有人说是做了隐藏页，分享商品详情时截取的隐藏页顶部，经测试无效，也可能是我方法不对，总之PASS。
方案二：手写小程序canvas秒天秒地，类似于之前发过一篇：小程序前端canvas将页面生成图片海报并保存，自己动手丰衣足食。但是我现在太懒了，所以PASS。
方案三：找到个简单易懂还很好用的小程序canvas绘图组件，感谢作者。喜欢的可以去支持一下。
mp_canvas_drawer

技术：小程序，canvas，mp_canvas_drawer（组件）

下面开始撸代码

First Step 引入组件

-git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地（或者直接下载压缩包）
-复制component文件夹里的mp_canvas_drawer组件文件夹，拷贝至自己的component文件夹。
-在需要使用的页面json文件中设置使用组件

{
  "usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }
}

Second Step 撸代码

商品详情就不多说了，获取商品信息goods，存入data，下面开始整硬菜

先做好准备工作

goods.wxml

<view class="container">
  <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
</view>

goods.js

Page({
  data: {
    painting: {},  //传入组件的json，设置绘画元素、位置等信息
    shareImage: ''  //储存绘画完成后返回的图片路径
    goods:{}  //已获取的商品详情信息
  },
  onLoad () {
    this.eventDraw();  //绘制图片
  }
})

然后整绘制方法

  eventDraw () {
    var _this = this;
    wx.showLoading({
      title: '绘制分享图片中',
      mask: true
    })
    _this.setData({
      painting: {
        width: 375,  //画布尺寸
        height: 300, //画布尺寸
        clear: true,
        views: [
          {
            type: 'image', //绘制商品图
            url: _this.data.goods.cover_pic, //商品主图路径
            top: 90,  //按画布比例自行计算距离和宽高
            left: 30,
            width: 100,
            height: 100
          },
          {
            type: 'text',  //商品名称
            content: _this.data.goods.name,
            fontSize: 18,
            lineHeight: 21,
            color: '#383549',
            textAlign: 'left',
            top: 140,
            left: 150,
            width: 175,
            MaxLineNumber: 2,
            breakWord: true,
            bolder: true
          },
          {
            type: 'text',  //折扣价
            content: '￥26.88',
            fontSize: 28,
            color: '#E62004',
            textAlign: 'left',
            top: 95,
            left: 150,
            bolder: true
          },
          {
            type: 'text',  //原价
            content: '￥69.88',
            fontSize: 20,
            color: '#7E7E8B',
            textAlign: 'left',
            top: 101,
            left: 260,
            textDecoration: 'line-through'
          },
          {
            type: 'image',  //卡片背景图，铺满画布
            url: 'http://xxx/uploads/image/store_13/acb8823cc4b3b4e7ecd2bf237ee1b074805da6bd.png',
            top: 0,
            left: 0,
            width: 375,
            height: 300
          },
        ]
      }
    })
  }

获取图片路径后储存

eventGetImage(event){
    wx.hideLoading()
    const { tempFilePath, errMsg } = event.detail
    if (errMsg === 'canvasdrawer:ok') {
      this.setData({
        shareImage: tempFilePath
      })
    }
}

设置分享卡片图

onShareAppMessage(){
    var that = this;
    return {
      path:"/pages/index/index",
      imageUrl:that.data.shareImage
    }
  }

至此所有步骤基本完工，出效果

image.png

其他

使用过程中发现组件绘制文字中划线（line-through）的高度偏低，或者需要其他自定义，可自行在canvasdrawer.js文件调整。

    drawTextLine (left, top, textDecoration, color, fontSize, content) {
      if (textDecoration === 'underline') {
        this.drawRect({
          background: color,
          top: top + fontSize * 1.2,
          left: left - 1,
          width: this.ctx.measureText(content).width + 3,
          height: 1
        })
      } else if (textDecoration === 'line-through') {
        this.drawRect({
          background: color,
          top: top + fontSize * 0.6,
          left: left - 1,
          width: this.ctx.measureText(content).width + 3,
          height: 1
        })
      }
    }