vue 提升html2canvas渲染速度

提升dom转化成图片 主要是html2canvas里的ignoreElements属性

<div class="qrDiv" id="qrDiv" ref="contentToConvert" v-loading="qrLoading">
        <div>我是标题</div>
        <div class="tips">
          <span class="pr20">{{ 1111111 }}</span>
         </div>
        <canvas ref="qrCodeCanvas"></canvas>
      </div>
      <div class="flex-around button">
        <el-button class="fill"  round @click="customDownClick" :loading="savePicLoading" v-clickAgain
          >保存图片</el-button
        >
</div>

点击事件

async customDownClick(){
      this.savePicLoading=true;
      // 获取要转换的 div 元素
      const element = this.$refs.contentToConvert;
      let tags = ['HEAD','LINK','STYLE'] // 必须保留的节点，保持样式效果等
      try {
        // 使用 html2canvas 将 div 转换为 canvas
        const canvas = await html2canvas(element,{
          element:element,
          scale:1,
          useCORS:true,
          logging: false,
          ignoreElements:e=>{
            // 忽略带有 'ignore-me' 类名的元素.
           if(e.contains(element) || element.contains(e) || e.getAttribute('data-html2canvas') != null || tags.indexOf(e.tagName)!=-1){
                 return false
             }
             return true
          }
        })
          
        // 将 canvas 转换为图片 URL
        const image = canvas.toDataURL('image/png');
        // 创建一个临时链接元素
        const link = document.createElement('a');
        link.href = image;
        link.download = `${this.stationInfo.oilStationNameAbbr}${moment().format("YYYYMMDDHHmmss")}.png`; // 设置下载文件名
        // 触发下载
        link.click();
        this.savePicLoading=false;
        this.dialogVisible=false;
      } catch (error) {
        console.error('Error converting div to image:', error);
        this.savePicLoading=false;
      }
    }

速度将会得到很大优化…