当前位置: 首页 > news >正文

解决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.lryc.cn/news/344265.html

相关文章:

  • 模型智能体开发之metagpt-多智能体实践
  • Java | Leetcode Java题解之第67题二进制求和
  • 考过PMP之后,为什么建议学CSPM?
  • 智能合约是什么?搭建与解析
  • windows下安装最新的nginx
  • 【深耕 Python】Data Science with Python 数据科学(19)书402页练习题:模型准确率对比研究、KMeans算法的一点探讨
  • 汽车品牌区域营销方案
  • matlab 中在3维坐标系中绘制一个点的X,Y,Z坐标,除了mesh还有什么函数?使用格式与mesh都有什么区别?
  • 如何在六个月内学会任何一门外语(ted转述)
  • 前端 Android App 上架详细流程 (Android App)
  • MySQL学习笔记11——数据备份 范式 ER模型
  • 软件测试基础理论复习
  • 【UnityRPG游戏制作】Unity_RPG项目_玩家逻辑相关
  • QT_BEGIN_NAMESPACE
  • Swift 集合类型
  • string容器
  • Ansible-inventory和playbook
  • HI3516CV610
  • ansible内置主机变量及魔法变量
  • 设计模式一
  • MySQL中JOIN连接的实现算法
  • [力扣题解] 216. 组合总和 III
  • Spring Security Oauth2 JWT 添加额外信息
  • 蜜蜂收卡系统 加油卡充值卡礼品卡自定义回收系统源码 前后端开源uniapp可打包app
  • 三星硬盘好还是西数硬盘好?硬盘数据丢失怎么找回
  • 企业微信hook接口协议,ipad协议http,设置是否自动同意
  • 自动化测试的成本高效果差,那么自动化测试的意义在哪呢?
  • h5页面用js判断机型是安卓还是ios,判断有app安装没app跳转应用商店app stroe或者安卓应用商店
  • 算法人生(17):从“课程学习”到“逐步暴露心理疗法”
  • C++仿函数周边及包装器