解决html2canvas生成图片慢的问题

 

// 主要看那个点击事件就行
<divclass="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;});},