vue 确定图片加载完再执行html2canvas

Vue.js 中确定图片加载完成后再执行 `html2canvas` 可以通过利用 Vue 的生命周期钩子和 `Promise` 来实现。`html2canvas` 是一个将网页内容转换为 canvas 图片的库，在图片未加载完毕就执行可能会导致转换失败或者显示错误的图片。

下面是一个简单的示例：

<template>
  <div>
    <img :src="imageSrc" ref="canvasImage" v-if="imageSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      canvasData: null,
    };
  },
  mounted() {
    // 使用 Intersection Observer API 或者 Vue 的 $nextTick 防抖方法
    this.$nextTick(() => {
      const img = this.$refs.canvasImage;
      if (img && img.complete) { // 检查图片是否已加载完成
        Promise.resolve(img.toDataURL('image/png'))
          .then((dataUrl) => {
            this.canvasData = html2canvas(document.querySelector('your-dom-element'), {
              onclone: function(node) {
                node.setAttribute('width', '100%');
                node.setAttribute('height', '100%');
              }
            }).then((canvas) => {
              // 保存或者做其他处理
              console.log(canvas);
            });
      } else {
        // 图片未加载，可以添加一个 load 事件监听
        img.addEventListener('load', () => {
          // 当图片加载完成后执行相同操作
        });
      }
    });
  },
};
</script>

在这个例子中，我们首先检查图片元素是否已经完成加载 (`complete` 属性)，如果已完成则立即创建 `html2canvas` 的 promise。如果没有加载完成，则在图片的 `load` 事件触发后执行。这样确保了图片加载完成后才开始截图过程。