解决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.mzph.cn/web/8959.shtml

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

相关文章

AI智能化逐渐趋于成熟后,预测今后最吃香的开发职业

AI智能化正在成熟的路途中&#xff0c;这中间会有波折&#xff0c;但终有一天会来的&#xff0c;我相信等到了这一天&#xff0c;我们的开发效率和代码质量&#xff0c;将会大大不同&#xff0c;而我们的团队与个人&#xff0c;也会面临着很棒的体验。 那么在AI智能化真正趋于成…

前端开发攻略---使用Sass调整颜色亮度,实现Element组件库同款按钮

目录 1、演示 2、实现原理 3、实现代码 1、演示 2、实现原理 改变颜色亮度的原理是通过调整颜色的 RGB 值中的亮度部分来实现的。在 Sass 中&#xff0c;可以使用颜色函数来操作颜色的 RGB 值&#xff0c;从而实现亮度的调整。 具体来说&#xff0c;亮度调整函数通常会改变颜…

武汉星起航:展望跨境电商新篇章,创新发展助力品牌国际化

随着全球经济一体化的深入发展&#xff0c;跨境电商行业正迎来前所未有的发展机遇。在这个充满机遇的时代&#xff0c;武汉星起航电子商务有限公司以其独特的自营亚马逊跨境电商模式和卖家孵化服务&#xff0c;成为了行业内的一股强劲力量。展望未来&#xff0c;武汉星起航将继…

VLM与基础分割模型的联合使用

最近做的项目里有涉及大模型&#xff0c;里面有一部分的功能是&#xff1a; 将图片输入VLM(视觉语言模型&#xff0c;我使用的是llava)&#xff0c;询问图中最显著的物体&#xff0c;将其给出的答案作为基础分割模型&#xff08;我使用的是Grounded-SAM&#xff09;的text prom…

云原生测试实战-云计算大数据云原生架构容器技术Kubernetes计算机软件工程软件开发

系列文章目录 送书第一期 《用户画像&#xff1a;平台构建与业务实践》 送书活动之抽奖工具的打造 《获取博客评论用户抽取幸运中奖者》 送书第二期 《Spring Cloud Alibaba核心技术与实战案例》 送书第三期 《深入浅出Java虚拟机》 送书第四期 《AI时代项目经理成长之道》 …

Gradle报错Cause: zip END header not found,构建问题解决

问题描述 构建报错&#xff1a;Cause: zip END header not found 解决办法 File>>setting>>Build,Execution,Deployment>>Gradle 选择你本地的Gradke路径 问题解决

2024年数维杯数学建模C题思路

文章目录 1 赛题思路2 比赛日期和时间3 竞赛信息4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

拼多多投产比怎么逐步调高

提高拼多多的投产比&#xff08;ROI&#xff09;需要综合考虑多个因素&#xff0c;包括点击量、转化率、客单价以及点击花费。以下是一些有效的方法&#xff1a; 拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自…

8-3 html中的表单标签 select和textarea

跟学b站黑马程序员pink老师&#xff0c;之前发过长篇&#xff0c;太长不好阅读&#xff0c;拆分成短篇 8.4.3 select下拉表单元素 如果在页面中有多个选项让用户选择&#xff0c;并且想要节约页面空间&#xff0c;我们可以用<select>标签来定义下拉列表 1.<select&g…

图片批量处理:批量调整图片色调,简单方法与高级技巧

随着数字摄影和社交媒体的普及&#xff0c;我们每天都接触到大量的图片。为了提升图片的观感和视觉效果&#xff0c;对图片进行色调调整变得至关重要。而对于那些需要处理大量图片的用户来说&#xff0c;批量调整图片色调则是一个能够大大提高工作效率的功能。本文将介绍办公提…

layui 数据表格 自动定位新增行位置

由于数据表格新增行后没有到新增到当前位置 继续增加的需求&#xff1a; 因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 高亮颜色浅 可自行更改 整理了一下 可根据 情况 修改 // 初始化滚动条位置变量 let tableScroll {scrollTob: 0,scrollLeft: 0,…

【Node.js工程师养成计划】之使用Node连接MongoDB进行增删改查

一、Node连接MongoDB mongodb npm install mongodb # or ... yarn add mongodbdemo: const { MongoClient } require(mongodb); // or as an es module: // import { MongoClient } from mongodb// Connection URL const url mongodb://localhost:27017; const client ne…

PyQt程序的打包

Qt hello - 专注于Qt的技术分享平台 记录下PyQt程序的打包。 一&#xff0c;安装 pip3 install PyInstaller 二&#xff0c;打包 pyinstaller -w -n app app.py 根据需要选择打包参数&#xff0c;例如&#xff1a;-F表示生成单文件模式&#xff0c;即只有一个可执行文件…

windows驱动开发-内核调度(二)

这篇文档记录剩下的内核调度对象。 信号灯 任何驱动程序都可以使用信号量对象在其驱动程序创建的线程和其他驱动程序例程之间同步操作。 例如&#xff0c;当驱动程序没有未完成的 I/O 请求时&#xff0c;驱动程序专用线程可能会将自身置于等待状态&#xff0c;并且驱动程序的…

javaWeb入门(自用)

1. vue学习 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://unpkg.com/vue2"></script> </head> <body><div id"…

Python 使用 WeChatFerry 搭建部署微信机器人详细教程(更新中)

下载安装 wcferry 库 通过 pip 快速安装 wcferry pip install wcferry免责声明&#xff1a;仅供学习和技术研究使用&#xff0c;不得用于任何商业或非法行为&#xff0c;否则后果自负。 基本原理 当微信收到消息时&#xff0c;抢在微信处理&#xff08;显示到页面&#xff0…

C++与java回调函数用法区别实例(二百七十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Netty 实现dubbo rpc

一、RPC 的基本介绍 RPC (Remote Procedure Call) 远程过程调用&#xff0c;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而程序员无需额外的为这个交互编程。也就是说可以达到两个或者多个应用程序部署在不同的服务器上&…

HOOPS Visualize:工业级3D可视化SDK,打造移动端和PC端工程应用程序

HOOPS Visualize是一种高性能的软件开发工具包&#xff08;SDK&#xff09;&#xff0c;旨在帮助开发人员轻松构建和集成高质量的3D可视化功能。这是一种全功能的&#xff0c;以工程为重点的场景图技术&#xff0c;我们称为Core Graphics。Core Graphics可集成到一个框架中&…

webpack从零到1 构建 vue3

为什么要手写webpack 不用cli &#xff08;无的放矢&#xff09;并不是 其实是为了加深我们对webpack 的了解方便以后灵活运用webpack 的技术 初始化项目结构&#xff08;跟cli 结构保持一致&#xff09; 新建 public src 等文件夹npm init -y 创建package.json文件tsc --init…