使用wepy2开发小程序生成海报需求

需求描述：

在小程序根据已有的dom样式，生成一张图片作为海报图分享出去。

方法1、使用官方的canvas api 把想要的dom样式通过画矩形画text一步步画出来。

方法2、 简单so easy。 使用Wml2Canvas插件

插件地址： github: https://github.com/wg-front/wxml2canvas

可以查看官方示例demo, 很简单。

第一步：准备好画图的标签和画图的画布canvas

wxml:

        <div class="card share__canvas share__canvas1" id="poster-cont">
          <img v-if="!errFlag" class="score-icon share__canvas1-image draw_canvas" data-type="image" data-url="../../../assets/images/icon_reg_result_house.png" src="../../../assets/images/icon_reg_result_house.png" />
          <img v-else class="score-icon share__canvas1-image draw_canvas" data-type="image" data-url="../../../assets/images/icon_reg_result_house_grey.png" src="../../../assets/images/icon_reg_result_house_grey.png" />
          <p class="tip1 share__canvas1-text draw_canvas" style="font-weight:600;" data-type="text" :data-text="result1">{{result1}}</p>
          <p class="tip2 share__canvas1-text draw_canvas" data-type="text" :data-text="result2">{{result2}}</p>
          <p class="tip3 share__canvas1-text draw_canvas" data-type="text" :data-text="result3">{{result3}}</p>
        </div>
    <canvas canvas-id="canvas1" class="share__canvas" :style="{width:width + 'px',height: height + 'px',position: 'fixed', top: '-199999rpx'}"></canvas>

主要注意点:
1、<canvas></canvas>标签可以定位到一个看不到的地方
2、share__canvas share__canvas1 这些样式不能少
3、data-type属性不能少，图片的data-url也不能少， 文字内容的data-text也不能少，不然画出来的图是空白的。

  created() {
    const res = wx.getSystemInfoSync()
    this.width = res.screenWidth
    this.height = res.screenHeight
  },

canvas画布的宽和高 可以取设备的宽和高。wx.getSystemInfoSync()

第二步：使用api画图

var canvasJs = require('../../utils/canvasJS/index') // 引入，我这里是下载了源码到本地，没有通过npm安装。
// 通过npm安装的，使用import
// 其他的代码略。。。。。。
drawImage() {
      return new Promise(reslove => {
        let Wxml2Canvas = canvasJs.Wxml2Canvas
        var query = wx.createSelectorQuery()
        query.select('#poster-cont').boundingClientRect(function (rect) {
          // 分享图只能是宽高比1:1比例
          let size = rect.width > rect.height ? rect.width : rect.height
          var drawimg = new Wxml2Canvas({
            width: size,
            height: size,
            element: 'canvas1',
          // obj: self,
            progress(percent) { },
            finish(url) {
              console.log('生成图片url', url)
              reslove({
                imageUrl: url
              })
            },
            error(res) {
              console.log(res)
              wx.showToast({
                title: '图片生成失败',
                icon: 'none'
              })
            }
          })
          let data = {
            list: [
              {
                type: 'rect',
                x: 0,
                y: 0,
                style: {
                  width: size,
                  height: size
                // fill: 'green'
                }
              },
              {
                type: 'wxml',
                class: '.share__canvas1 .draw_canvas',
                limit: '.share__canvas1',
                x: 0,
                y: 0
              }
            ]
          }
          drawimg.draw(data)
        }).exec()
      })
    }
    ````

最后一步：在分享api中使用画出的图

  // 定义分享
  onShareAppMessage() {
    let url = '/pages/home/xxx?id=' + this.id
    let title = '购房资格测试'
    const promise = this.drawImage()
    return {
      title: title,
      path: url,
      promise
      // imageUrl: imageUrl
    }
  },

噢啦！