npm install wxml2canvas

import Wxml2Canvas from 'wxml2canvas'

 data-type="inline-text"

<view class="function">
     <text class="my_draw_canvas" wx:for="{{instructionTextList}}" wx:key="index" data-type="inline-text" data-text="{{item}}">
                      {{item}}
      </text>
       <!-- <text class="my_draw_canvas" data-type="inline-text" data-text="测试测试测测试测试测试测试测试测试测试测试测试测试测试测试试测试">
                      测试测试测测试测试测试测试测试测试测试测试测试测试测试测试试测试
         </text> -->
</view>

let drawMyImage = new Wxml2Canvas({
      element: 'myCanvas', // canvas的id,
      obj: that, // 传入当前组件的this
      options: {class: ".exc-c",limit: ".limit-r",},
      width: that.data.width * 3,
      height: that.data.height * 3,
      // width: 794,
      // height: 1123,
      background: '#ffffff', // 生成图片的背景色
      progress(percent) { // 进度
        // console.log(percent);
      },
      finish(url) { // 生成的图片
        console.log('url',url)
        wx.hideLoading()
        that.savePoster(url)
      },
      error(res) { // 失败原因
        console.log(res);
        wx.hideLoading()
      }
    }, this);
let data = {
        // 获取wxml数据
        list: [
          {
            type: 'wxml',
            class: '.my_canvas .my_draw_canvas',  // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名）
            limit: '.my_canvas', // 要绘制的wxml元素根类名
            x: 0,
            y: 0,
          },
          { //绘制横线  logo下面
            type: 'line', x: 10, y: 50,x2:760,y2:50,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          { // 车牌下面
            type: 'line', x: 10, y: 178,x2:760,y2:178,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          {// 检测部位 下面
            type: 'line', x: 170, y: 208,x2:760,y2:208,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          {// 功能/作用 下面
            type: 'line', x: 10, y: 318,x2:760,y2:318,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          {// 正常状态 下面
            type: 'line', x: 10, y: 354,x2:760,y2:354,
            style: {
              width: 1,
              stroke: '#000'
            }
          },         // {// 画竖线  左边
          //   type: 'line', x: 10, y: 178,x2:10,y2:that.data.height-186,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },
          // {// 画竖线  右边
          //   type: 'line', x: 760, y: 178,x2:760,y2:that.data.height-186,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },          
          // {// 车牌照片  右边
          //   type: 'line', x: 170, y: 178,x2:170,y2:318,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },        
          // {// 检测部位  右边
          //   type: 'line', x: 250, y: 178,x2:250,y2:318,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },
      ]
    }
    // 绘制canvas
    drawMyImage.draw(data, this);

<view class="my_draw_canvas" data-type="text" style="width: 80px;height: 1px;background: rgba(0, 0, 0, 1);"></view>

<view class="my_draw_canvas" data-type="text" style="width: 1px;height: 1000px;background: rgba(0, 0, 0, 1);"></view>

wx.downloadFile({
      url: `图片地址`,
      success: function(res){
        let leftLogo = res.tempFilePath
        if(res.dataLength > 0){
          that.setData({
            leftLogo:leftLogo,
          })
        }else{
          that.setData({
            leftLogo:"",
          })
        }
        
      },
      fail: function (error) {
        wx.showToast({
          title: "预下载左侧logo失败",
          icon: 'none'
        })
      }
    })

<image class="my_draw_canvas" src="{{leftLogo}}" data-type="image" data-url="{{leftLogo}}"></image>