wxml-to-canvas文档: https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/wxml-to-canvas.html

1. 在小程序 package.json 所在的目录中执行命令安装 npm 包

npm install --save wxml-to-canvas

2. 构建 npm
   点击开发者工具中的菜单栏：工具 --> 构建 npm
3. 在json文件中进行配置引入

"usingComponents": {
    "wxml-to-canvas": "/miniprogram_npm/wxml-to-canvas"
 },

4. 在wxml中使用wxml-to-canvas组件

<!-- 图片展示 -->
<view class="paper_content" wx:if="{{tempFilePath}}">
    <image
    src="{{tempFilePath}}"
    mode="heightFix"
    style="height:66%;position: relative;z-index: 999; margin-top:20%"
    id="canvas_image"
    catchtap="hidePaper"
    />
</view>
<!-- canvas节点 -->
<view class="canvas-container">
    <wxml-to-canvas id="widget" width="{{shareImgWidth}}" height="{{shareImgHeight}}" />
</view>

5. 获取canvas画布dom节点

onLoad() {
    this.widget = this.selectComponent('.widget')
}

6. 生成海报和临时图片地址

// 点击生成海报按钮
      getPaper() {
        this.setData({
          tempFilePath: null 
        })
        let bg = "xxx.jpg",
        qrCode = this.data.qrcodeUrl
    
        wx.showLoading({
          title: '加载中',
          mask: true
        })
        this.wxmlToCanvas(bg, qrCode).then(() => {
            wx.hideLoading()
        }).catch((err)=>{
            wx.hideLoading()
        })
      },
      // 生成海报
      wxmlToCanvas(bg, qrCode) {
        return new Promise((resolve, reject) => {
          let style = {
            container: {
              width: 311,
              height: 553,
              flexDirection: 'row',
              backgroundColor: '#ccc',
            },
            img: {
              width: 311,
              height: 553,
              position: 'absolute',
            },
            qrCode: {
              width: 83,
              height: 83,
              position: 'absolute',
              right: 16.5,
              bottom: 26
            }
          }
          let wxml = `<view class="container">
          <image class="img" src="${bg}"></image>
          <image class="qrCode" src="${qrCode}"></image>
          </view>`
    
          this.renderToCanvas({ wxml, style}).then(res => {
            resolve(res)
          })
        })
      },
      //渲染成海报
      renderToCanvas({ wxml, style }) {
        return new Promise((resolve, reject) => {
          const p1 = this.widget.renderToCanvas({ wxml, style })
          p1.then((res) => {
            this.container = res
            return this.extraImage(this)
          }).then((res) => {
            resolve(res)
          })
        })
      },
      // 生成临时图片地址
      extraImage() {
        return new Promise((resolve, reject) => {
          const p2 = this.widget.canvasToTempFilePath()
          p2.then((res) => {
            this.setData({
              tempFilePath: res.tempFilePath
            })
            resolve(res.tempFilePath)
          })
        })
      },