首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浅谈两种前端截图方式:Canvas截图 vs SVG截图

Canvas截图:html2canvas SVG截图:rasterizehtml 原理 首先来谈下两种前端截图方式的原理,虽然实现方式不太一致,但是核心思想是相同的。...以html2canvas为代表的Canvas截图,通过遍历DOM克隆一份副本,将此副本在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。...转换过程可理解成:DOM→SVG的ForeignObject→Canvas→Image。 两种前端截图方式最后都是通过把DOM绘制到Canvas,再通过Canvas输出图片。...Canvas截图的限制性 无法渲染跨域资源(支持同域) 无法渲染iFrame和Flash内容(支持SVG) SVG截图的限制性 无法渲染跨域资源(支持同域) 无法渲染如lazyload等通过JS加载的资源...无法渲染内联background-image或JS操作background-image 方案 不多废话,直接上两种前端截图方式的代码,小伙伴们可根据项目需求自行优化代码和增加功能哈。

12.2K50
您找到你想要的搜索结果了吗?
是的
没有找到

html2canvas实现ArcGIS API for JavaScript 4.X截图功能

二、html2canvas实现地图截图 摆脱了ArcGIS的技术体系,跳到整个大前端的领域再看截图这个功能的话,其实是一个很简单的问题,无非就是将所要截取的DOM节点转换为图片这样一个需求,所以我们就找到了...介绍完html2canvas的一些基本信息之后,我们就来看看如何用它来实现我们的地图截图。...js原生获取DOM节点的方式通过id获取到这个div,然后将它传入html2canvas()这个方法即可,最后在它的回调函数里面拿到截图,如下: const element = document.getElementById...这个属性值是false,这就导致了截图时底图空白的问题,因为html2canvas截图的思路就是将所传入的DOM节点转换为canvas,但是既然传入的元素里面已经包含了一个canvas的话,它内部的转换逻辑肯定就会出错了...,这样就实现了一个地图截图功能了,以上推荐的就是关于截图空白的最简单的解决方法,其实还有另一种思路:既然传入html2canvas()方法中的元素中包含有另一个canvas元素导致的底图空白,那我们可以在截图之前先将这个

2.1K30
领券