html2canvas的ignoreElements的使用方法

2023-10-27

我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

在用hrml2canvas时,官方文档针对于ignoreElement属性给出了以下说法:

其中中间列表示默认值。

突然箭头函数的表示默认值瞬间一脸懵,无奈之下查找国内外文献甚至包括github上issue区,竟然没找到一个例子,几经尝试下,终于搞懂了这个的用法。

话不多说,上代码!开心!!!!!搞定了!!

解释:我是将节点“print”包含的组件用html2canvas转化canvas,其中将节点“printHide”元素隐藏掉,当遍历到id=’printHide‘时返回true即可

        html2canvas(document.getElementById('print'),{
            scale:2,
            logging:false,
            useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            if(element.id==='printHide')
            return true;
        },

        }).then(function(canvas) {
            document.body.appendChild(canvas);
        });

默认值是false,那隐藏就是true喽

详解:

实际上,ignoreElement函数会依次遍历每一个经过的节点“print”下的元素,将代码稍作更改即可

        html2canvas(document.getElementById('print'),{
            scale:2,
            logging:false,
            useCORS:true,
            allowTaint:true,
            ignoreElements:(element)=>{
            /*遍历每个节点*/
            if(element.id==='printHide')
            console.log(element);
            return false;
        },

        }).then(function(canvas) {
            document.body.appendChild(canvas);
        });

此时可看到控制台上把节点”print“下所有的元素都打印了一遍。

完美解决!

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html2canvas的ignoreElements的使用方法 的相关文章

  • Canvas 动画在 FireFox 中卡顿,但在 Chrome 中完美

    我最近开始做一些 HTML5 Canvas 的东西 并且很高兴地开展我的业务 在 Chrome 中测试东西 直到我决定尝试我在 Firefox 中所做的事情 效果不太好 这是我正在做的事情的一个简单的例子 设置基本的 requestAnim
  • 在 HTML 画布上绘制线宽连续变化的线条

    我试图画一条线 从一条细线开始 然后逐渐加宽直到结束 我需要绘制半平滑曲线 由几条直线合成 并且在寻找解决此任务的方法时遇到问题 这个小提琴显示了我的问题 http jsfiddle net ZvuQG 1 http jsfiddle ne
  • 在画布中的鼠标位置放大/缩小

    我正在尝试使用 p5 js 实现缩放功能 当前缩放级别以及 x 和 y 位置存储在controls view目的 默认位置或 0 0 位置位于左上角 问题是调整放大 缩小时的 x 和 y 位置值 以便无论视图的当前位置是什么 它都会停留在缩
  • 使用 html2canvas 将 highcharts 图表渲染为 pdf 在 IE 和 Firefox 上不起作用

    我们使用 html2canvas js 和 html2canvas svg js 版本 0 5 0 beta1 以及 highcharts js 将圆环图下载为 pdf 这在 Chrome 中按预期工作 但在 IE 和 Firefox 中不
  • 通过鼠标和触摸在画布上绘图

    我想在画布上绘图 使用鼠标效果很好 但我必须如何修改代码才能使其在 iPad 或 Nexus 上运行 link http jsfiddle net FgNQk 6 var canvas document getElementById can
  • 将画布的鼠标坐标转换为地理坐标

    我正在尝试使用 Python Tkinter 创建包含意大利所有城市的地图Canvas 我在网上找到了一张意大利地图的图片 其中突出显示了一些城市 并将其插入到我的Canvas 之后 我使用一个函数来确定 2 个突出显示的城市的画布坐标 i
  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得
  • 如何始终将焦点保持在画布上?

    我一直在这个论坛寻找解决方案 但尚未找到 无论我在页面上的哪个位置单击 我都需要始终将焦点放在画布元素上 我有几个按钮 在每个 onclick 事件中我写 document getElementById canvas focus 这确实有效
  • 无法在“CanvasRenderingContext2D”上执行“drawImage”

    我收到以下错误 未捕获的类型错误 无法在 CanvasRenderingContext2D 上执行 drawImage 提供的值不是 HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或I
  • JavaScript 原型继承和 html canvas

    我是一名 Ruby 开发人员 最终决定认真学习 JavaScript 所以我买了一些书 开始深入研究 但当我试图理解原型继承时 我很快就陷入了困境 这本书的例子之一如下 给定一个 Shape 其原型有一个绘制方法 以及两个子形状 一个 Tr
  • 为什么对于大于 65776 像素的画布源,drawImage 性能差异很大

    我在 jsperf 上写了一些与以下相关的测试用例 1 在屏幕外画布上绘图 2 将图像绘制到屏幕画布上 我发现如果源画布中的像素数 无论 dst 小于 65776 像素 性能会高得多 我预计这个性能限制是 65536 像素 如果有的话 He
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 在 JavaScript 函数中加载图像

    我有获取图像像素颜色的功能 function getImage imgsrc var img img src imgsrc var imageMap new Object img load function var canvas
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人
  • 将 visjs 网络导出为 jpeg/png 图像

    我正在研究 Angular vis js Vis js 在画布上工作 用于创建节点和节点之间的链接 有没有办法从 visj s 画布中获取图像 jpeg png 看看这个片段 我想它会对你有所帮助 在 vis 画布下 您将看到一个 PNG
  • 即使光标位于画布之外也会调用 MouseMove 事件

    我不知道我的代码或 WPF 是否有问题 但问题是 我想创建一个小程序 您可以在其中用光标在画布上绘图 我有一个简单的 WPF 窗口
  • Html5画布最热门的任意形状

    我正在尝试开发可以在画布中渲染图像和文本的程序 我尝试处理画布中图像的点击 但它适用于可矩形图像 我的问题 您是否知道处理单击画布中图像的可见部分 非透明部分 的解决方案或框架 我正在寻找 ActionScript hitTestObjec
  • DrawBitmapMesh 如何在 Android Canvas 中工作

    我想在矩形上绘制位图 我使用以下值 this meshWidth 1 this meshHeight 1 this verts new float 8 this points 0 x float this getWidth 4 this p

随机推荐

  • Vue 指令01——v-test和v-html的使用

    Vue 指令01 v test和v html的使用 V test指令 作用 替换标签里的文本内容 v test的实例 div h2 1234 h2 div div h2 12 message 哭兮兮 h2 div var app new V
  • DC8靶场练习

    目录 一 靶场信息 二 信息收集 三 渗透过程 四 提权 一 靶场信息 二 信息收集 1 确定目标IP 2 扫描端口 3 漏洞扫描 三 渗透过程 访问网站页面 思路 当点击该页面的 welcome to DC8 字样时 发现上面的url变化
  • 深入理解Git基本原理

    深入理解Git基本原理 资料 1 http my oschina net sunchp blog 346076 2 http www nowamagic net academy detail 48160207 3 Git from the
  • 使用Python统计字符串中各种字符的个数

    Python 统计字符串中各种字符出现的次数 一 提出问题 随机输入一段字符串 包括数字 英文 空格 其他字符 统计这些字符在其中出现的次数 二 难点提示 思路 从键盘随机输入一段字符串 然后循环遍历字符串 通过循环字符串中的每一个字符 统
  • AutoGPT中文版,保姆级详细安装教程 - MacOS 篇

    ChatGPT狂飙160天 世界已经不是之前的样子 新建了人工智能中文站https ai weoknow com 每天给大家更新可用的国内可用chatGPT资源 首先来简单的介绍 一下AutoGPT 簡單的說 AutoGPT 相當於給基於
  • Android 手游聚合SDK小知识(二) 聚合分包

    更新 在上一篇文章中 我们介绍了如何聚合SDK的基本原理 介绍了聚合SDK的接口设计 那么当CP接入了我们的聚合SDK 给了我们游戏apk包时 这时我们又当如何分发渠道包呢 分发渠道包 该操作方式都是在只有游戏apk包的情况下进行的 开始合
  • 【JAVA web】idea Maven jetty 修改 端口号,上下文简单教程

    idea Maven jetty 修改 端口号 上下文简单保姆版教程 首先是修改端口号 上下文修改 首先是修改端口号 clean jetty run Djetty port 端口号 可随意编辑端口号 成功图片 上下文修改 首先打开红线划圈的
  • Web容器、Servlet容器、Spring容器、SpringMVC容器之间的关系

    以下内容为个人理解 如有误还请留言指出 不胜感激 Web容器 web容器 web服务器 主要有 Apache IIS Tomcat Jetty JBoss webLogic等 而Tomcat Jetty JBoss webLogic同时也是
  • 数据库索引原理,及MySQL索引类型

    原文 数据库索引原理 及MySQL索引类型 weixin 42181824的博客 CSDN博客 https blog csdn net weixin 42181824 article details 82261988 MySQL索引类型一览
  • 阿里云ecs服务器买完后可以更换操作系统么?

    可以的 一般来说你的服务器在内地节点都是可以随意更换操作系统的 不管是阿里云windws系统更换为LInux系统还是centos系统更换为win系统镜像都是可以的 具体更换系统方法可以参考 更换系统盘 公共镜像 云服务器 ECS 阿里云 正
  • ubuntu1604常用快捷键

    简单实用的 Ubuntu 快捷键 1 Ctrl W 关闭当前 Nautilus 窗口 2 Ctrl Shift W 关闭所有的 Nautilus 窗口 3 Ctrl T 在 Nautilus 打开新的 Tab 4 Ctrl PageUp 移
  • top-k问题详解

    目录 1 TOP K问题的定义以及思想 1 TOP K问题的定义 2 解决TOP K问题的思路 排序法 不推荐使用 堆函数操作法 不推荐使用 最终算法 复杂度 完整实现 每一部都有详细的过程 1 TOP K问题的定义以及思想 1 TOP K
  • [机器学习]1.1环境安装初始化

    机器学习 第一章 环境安装初始化 python环境初始化 机器学习 前言 一 centos初始化 二 虚拟机安装 1 下载 三 Centos安装 1 镜像下载 2 镜像基础硬件配置 3 镜像安装 4 网络配置 总结 前言 chatGPT的火
  • Websocket/SocketIO性能测试

    1 Jmeter安装socket插件 打开Jmeter gt Option gt Plugin Manager gt 搜索websocket gt 安装WebSocket Samplers by Peter Doornbosch 2 每种W
  • powershell激活conda失败

    搜索powershell 管理员权限打开 输入命令conda init powershell 打开powershell命令Set ExecutionPolicy ExecutionPolicy RemoteSigned 关闭现有termin
  • π142E30 Pai142E30 四通道数字隔离器芯片代替NSi8142N0

    参数 142E30 Pai142E30 3 0kVrms 200Mbps 四通道数字隔离器芯片完美代替NSi8142N0 优势 功耗更低 速度更快 抗干扰能力强 噪声低 特性 2Pai荣湃 142E30 Pai142E30 完美代替NSi8
  • C语言结构体,共用体所占字节数计算

    字节数 环境 char short int long long long float double 指针 windows 32 gcc 1 2 4 4 8 4 8 4 windows 64 gcc 1 2 4 4 8 4 8 8 无符号型在
  • Android:这是一份全面 & 详细的Webview使用攻略

    前言 现在很多App里都内置了Web网页 Hybrid App 比如说很多电商平台 淘宝 京东 聚划算等等 如下图 京东首页 那么这种该如何实现呢 其实这是Android里一个叫WebView组件实现 今天 我将献上一份全面介绍 WebVi
  • Android Intents和Intent过滤器

    点击打开链接 intent组成 组件名 action动作 data数据 category分类 extras附加信息 flag标记 Intent负责对应用中一次操作的动作 动作涉及数据 附加数据进行描述 Android则根据此Intent的描
  • html2canvas的ignoreElements的使用方法

    我的处女作 Canvas系列教程 在我的Github上正在连载更新 希望能得到您的关注和支持 让我有更多的动力进行创作 教程介绍 教程目录等能在README里查阅 传送门 https github com 827652549 CanvasS