wxml2canvas封装组件问题

想请问一下 这个代码我封装到了组件里面 在页面引入 我去生成出来的是空白图片 ，
但是我直接写入到父级页面里面他却可以生成出来。想请问一下这个是什么原理 。这个弹出的海报每个页面都要有 不会要每个页面都写一遍这个代码嘛
js代码

const app = getApp()
import Wxml2Canvas from 'wxml2canvas'
Component({
  properties: {
    current: {
      type: Object,
      default: null,
    },
  },
  data: {
    width: '',
    height: '',
  },
  pageLifetimes: {
    show: function () {
      console.log(this.data.current)
    },
  },
  methods: {
    drawCanvas: function () {
      const that = this
      const query = wx.createSelectorQuery().in(this)
      query
        .select('#el-canvas')
        .fields(
          {
            size: true,
            scrollOffset: true,
          },
          (data) => {
            let width = data.width
            let height = data.height

            setTimeout(() => {
              that.drawPost()
            }, 2000)
          }
        )
        .exec()
    },
    drawPost() {
      let self = this
      //创建wxml2canvas对象
      let drawImage = new Wxml2Canvas(
        {
          element: 'post-canvas', // canvas节点的id,
          obj: self, // 在组件中使用时，需要传入当前组件的this
          width: 640, // 宽高
          height: 900,
          background: 'red', // 默认背景色
          progress(percent) {
            // 绘制进度
            // console.log(percent)
          },
          finish(url) {
            console.log('创建的图片', url)
            self.setData({
              url,
            })
            self.saveImg()
          },
          error(res) {
            console.log(res)
          },
        },
        self
      )
      let data = {
        //直接获取wxml数据
        list: [
          {
            type: 'wxml',
            class: '.bg-img .post',
            limit: '.bg-img',
            x: 0,
            y: 0,
          },
        ],
      }
      //传入数据，画制canvas图片
      drawImage.draw(data, this)
    },
    saveImg() {
      const that = this
      wx.saveImageToPhotosAlbum({
        filePath: that.data.url,
        success: function () {
          wx.showToast({
            title: '保存成功',
          })
        },
      })
    },
  },
})

wxml

<view class="post-base">
  <view class="content">
    <view class="close-img">
      <image src="../../images/index/close.png" />
    </view>
    <view class="bg-img post" id="el-canvas">
      <image data-type="image"
        data-url="https://thirdwx.qlogo.cn/mmopen/vi_32/yNa3IYMsLMBr5wB0Qia7sy0TLvicZicZPvOuhgXGeOkic8Uic7nZpDf4JdSFD7aAxYbkxKibRjAgPNS0y4GjTCeRibNRQ/132"
        src="https://thirdwx.qlogo.cn/mmopen/vi_32/yNa3IYMsLMBr5wB0Qia7sy0TLvicZicZPvOuhgXGeOkic8Uic7nZpDf4JdSFD7aAxYbkxKibRjAgPNS0y4GjTCeRibNRQ/132"
        class="post-head post" />
      <view class="post-nickName post" data-type="text" data-text="sny" data-width="300" data-height="90"
        data-lineHeight="90">
        sny
      </view>
      <image data-type="image" data-url="https://cdn.elancoapp.com/elanco/img/1e9a30ed494f4926b3624568fd9822ba.png"
        src="https://cdn.elancoapp.com/elanco/img/1e9a30ed494f4926b3624568fd9822ba.png" class="post-bg post" />
    </view>
    <view class="rule">
      查看活动规则
    </view>
    <view class="btn-group">
      <view class="btn">
        <image src="../../images/index/wx.png" />
        <view class="text">
          微信好友
        </view>
      </view>
      <view class="btn" bindtap="drawCanvas">
        <image src="../../images/index/save.png" />
        <view class="text">
          保存海报
        </view>
      </view>
    </view>
  </view>
</view>
<canvas canvas-id="post-canvas" class="answerCanvas"></canvas>

wxss

.post-base {
  width: 100%;
  height: calc(~"100vh - 170rpx");
  background: rgba(0, 0, 0, 0.60);
  position: fixed;
  top: 170rpx;
  display: flex;
  justify-content: center;

  .content {
    width: 640rpx;
    height: 1200rpx;
    position: relative;
    margin-top: 48rpx;
    box-sizing: border-box;
    // background-color: red;

    .close-img {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .bg-img {
      margin-top: 90rpx;
      height: 900rpx;
      position: relative;

      .post-head {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        position: absolute;
        top: 34rpx;
        left: 38rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;

        }
      }

      .post-nickName {
        position: absolute;
        height: 88rpx;
        line-height: 88rpx;
        left: 150rpx;
        top: 34rpx;
      }

      .post-bg {
        width: 100%;
        height: 100%;
      }
    }

    .rule {
      font-size: 28rpx;
      color: #FFFFFF;
      font-weight: 400;
      text-decoration: underline;
      text-align: center;
      margin-top: 61rpx;

    }

    .btn-group {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;

      .btn {
        width: 284rpx;
        height: 100%;
        background-color: #0072CE;
        font-size: 32rpx;
        color: white;
        font-weight: 400;
        display: flex;
        border-radius: 0;
        align-items: center;

        .text {
          margin-left: 18rpx;
        }

        image {
          width: 48rpx;
          height: 48rpx;
          margin-left: 42rpx;
        }
      }
    }
  }

}

.answerCanvas {
  width: 640rpx;
  height: 900rpx;
}