解决html2canvas生成图片慢的问题

 

// 主要看那个点击事件就行
<div
              class="textBox-right-board-group"
              v-for="item in screenList"
              :key="item.id"
            >
              <!-- 获取不同分辨率下的屏幕的展示的文字大小DPI： fontSize: getFontSize(item.resolutionRatio), -->
              <div
                :class="['borderContainer', 'box' + item.id]"
                :style="{
                  width: changeResolutionRatio(item.resolutionRatio, 'width'),
                  height: changeResolutionRatio(item.resolutionRatio, 'height'),
                }"
                @click="
                  getDivImg('.box' + item.id, {
                    width: changeResolutionRatio(item.resolutionRatio, 'width'),
                    height: changeResolutionRatio(
                      item.resolutionRatio,
                      'height',
                    ),
                  })
                "
              ></div>
              <span> {{ item.resolutionRatio | changeResolutionRatio }} </span>
            </div>



    getDivImg(dom, obj) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const element = document.querySelector(dom);
      html2canvas(element, {
        useCORS: true,
        scale: 2,
        quality: 0.7,
        // 忽略无用节点（主要是这个）
        ignoreElements: e => {
          if (
            e.contains(element) ||
            element.contains(e) ||
            e.tagName === 'STYLE' ||
            e.tagName === 'LINK' ||
            e.getAttribute('data-html2canvas') != null // header里面的样式不能筛掉
          ) {
            console.log(e);
            return false;
          }
          // console.log(e.tagName);
          return true;
        }
      })
        .then((canvas) => {
          this.imgUrl = canvas.toDataURL("image/png");
        })
        .finally(() => {
          const enlargeScale = 2;
          function getPxValue(value) {
            const index = value.indexOf("px");
            return index !== -1 ? value.substring(0, index) : value;
          }
          this.dialogImgWH = {
            width: getPxValue(obj.width) * enlargeScale + "px",
            height: getPxValue(obj.height) * enlargeScale + "px",
          };
          loading.close();
          this.dialogVisible = true;
        });
    },