解决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;});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/681242.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NTP网络时间服务器如何实现煤矿智能化管理?

随着煤矿行业的不断发展&#xff0c;安全生产和效率是煤矿企业始终关注的重点。NTP网络时间服务器作为一种高精度的时间同步技术&#xff0c;其应用在煤矿领域也逐渐得到广泛推广。 ZRBG1000 NTP网络时间服务器是对煤矿等行业对网络时间同步应用需求设计的高准确度、高性能NTP网…

买入期权是什么意思?

今天期权懂带你了解买入期权是什么意思&#xff1f;买入期权&#xff1a;也称看涨期权。一种赋予其持有者以特定的价格、在特定的到期日当天或之前买入某种资产的权力的金融工具。 买入期权是什么意思&#xff1f; 买入期权也称看涨期权。即赋予其持有者在到期日或到期日之前按…

OpenAI 发布 AI 生成图片检测器;Meta 推出 AI 广告创意工具;Google 正式发布 Pixel 8a,主打 AI

OpenAI 发布 AI 生成图片检测器 OpenAI 昨日官宣推出专用的 AI 监测工具&#xff0c;用于监测图片是否由其旗下 AI 图片生成工具 DALL-E 生成&#xff0c;准确率高达 98.8%。 不过该公司表示&#xff0c;这个检测工具并非旨在检测 Midjourney 和 Stability 等其他流行生成器生…

roofline model加速模型部署最后一公里

文章目录 模型部署教程来啦:)什么是Roofline Model&#xff1f;算法模型相关指标计算量计算峰值参数量访存量带宽计算密度kernel size对计算密度的影响output size对计算密度的影响channel size对计算密度的影响group convolution对计算密度的影响tensor reshape对计算密度的影…

五张图教你快速掌握设备CPU占用率高相关知识

以下五张图教你快速了解并掌握CPU占用率高的相关知识&#xff0c;包括CPU占用率高造成的影响、引起CPU占用率高的常见原因、如何定位CPU占用率高、如何解决CPU占用率高和如何尽量避免CPU占用率高 点击查看相关内容&#xff1a; 科普&#xff1a;CPU是怎么被制造出来的&#xf…

Linux流程控制

if语句 基本格式 if condition thencommand1 fi 写成一行 if [ $(ps -ef | grep -c "ssh") -gt 1 ]; then echo "true"; fi if-else语句 格式 if condition thencommand1 command2...commandN elsecommand fi if else- if else if condition1 th…

JAVA版本的ATM编程问题记录

前段时间用C语言写了个银行ATM系统&#xff0c;还写了一篇文章记录了一些&#xff0c;C语言的ATM文章。后来又用IDEA写了一个JAVA版本的银行ATM。有人就会问为啥浪费这个时间写ATM呢&#xff1f;&#x1f9d0;其实是我本科代码没学好&#xff0c;所以现在想利用比较熟悉的ATM系…

网络相关笔记

IPv4地址 IPv4地址通常以“点分十进制”形式书写&#xff0c;即四个0-255之间的十进制数&#xff0c;各数之间用英文句点&#xff08;.&#xff09;分隔&#xff0c;例如&#xff1a;192.0.2.1。总共32位的地址空间可以表示大约42亿个不同的地址。 IPv4地址结构包括&#xff…

【python数据分析基础】—pandas透视表和交叉表

目录 前言一、pivot_table 透视表二、crosstab 交叉表三、实际应用 前言 透视表是excel和其他数据分析软件中一种常见的数据汇总工具。它是根据一个或多个键对数据进行聚合&#xff0c;并根据行和列上的分组键将数据分配到各个矩形区域中。 一、pivot_table 透视表 pivot_tabl…

微信公众号随心自定义商城源码系统 带完整的安装代码包以及安装部署教程

传统的微信商城模板化严重&#xff0c;无法满足企业的个性化需求。小编给大家分享一款随心自定义商城源码系统。该系统支持高度自定义&#xff0c;企业可以根据自身需求灵活调整商城页面、功能模块和运营策略&#xff0c;打造独具特色的微信商城。 以下是部分代码示例&#xf…

图片优化?imageView2/2/w/300/h/200

使用?imageView2/2/w/300/h/200在图片后面拼上去会使图片体积变小&#xff0c;加载速度优化; 例&#xff1a; 未使用&#xff1a; https://cdn.dev.scrm.juplus.cn/hzGkmfPH6Yep7nZFmFoo0j8Qf.jpg 使用后&#xff1a; https://cdn.dev.scrm.juplus.cn/hzGkmfPH6Yep7nZFmFo…

UE5材质基础(2)——数学节点篇1

UE5材质基础&#xff08;2&#xff09;——数学节点篇1 目录 UE5材质基础&#xff08;2&#xff09;——数学节点篇1 Add节点 Append节点 Abs节点 Subtract节点 Multiply节点 Divide节点 Clamp节点 Time节点 Lerp节点 Add节点 快捷键&#xff1a;A鼠标左键 值相加…