浅析js实现网页截图的两种方式
Web端的截图(生成图片)并不算是个高频的需求，资料自然也不算多，查来查去，也不过Canvas 和 SVG两种实现方案，原理大概相似，都非真正义上的截图而是把DOM转为图片，然而实现方式却截然不同。
Canvas 实现
如何将dom转换成canvas图片？自然是要一点点画到canvas里，想想都是件麻烦事。通过分析github的知名截图库 niklasvh/html2canvas (7k+ star)的源码，梳理了其大致的思路：
- 递归取出目标模版的所有DOM节点，填充到一个rederList，并附加是否为顶层元素/包含内容的容器 等信息
- 通过z-index postion float等css属性和元素的层级信息将rederList排序，计算出一个canvas的renderQueue
- 遍历renderQueue，将css样式转为setFillStyle可识别的参数，依据nodeType调用相对应canvas方法，如文本则调用fillText，图片drawImage，设置背景色的div调用fillRect等
- 将画好的canvas填充进页面
无论是排序优先级的计算还是从css到canvas的转换，毫无疑问都是些巨麻烦的事，尤其是放在真实的业务场景里，DOM模版中往往会包含复杂的样式与排版，html2canvas 足足用了20多个js来实现这层转换，复杂成度可见一斑。索性，我们不需要再重新造一遍轮子。
使用canvas转化的话灵活性较高，环境依赖上也只需要确保浏览器支持canvas就可以了，但它有个显著的缺点：慢。原因自然是因为大量的计算与递归调用，这是无可避免的。不过html2canvas代码中大量使用了Promise，所以html2canvas 支持异步操作。
限制：
- 无法跨域跨域资源
- 无法渲染iframe，flash等内容，但目前支持svg
值得一提的是，尽管html2canvas主页表示它还处于实验室环境，但自14年起便已经被Twitter 等用在了生产环境，所以虽然有诸多限制，稳定性应该还是保障的。
canvas如此复杂，那么有没有一种更简单的方法呢？
自然是有的，那便是SVG
SVG实现
首先，svg本来就是矢量图形；其次，svg是可以用xml描述的；再其次，用来描述svg的标签里有个 foreignObject标签，这个标签可以加载其它命名空间的xml(xhtml)文档。也就是说，如果使用svg的话，我们不再需要一点点的遍历，转换节点；不用再计算复杂的元素优先级，只需要一股脑的将要渲染的DOM扔进<foreignObject></foreignObject>就好了，剩下的就交给浏览器去渲染。
让我们理一理思路：
- 首先，我们要声明一个基础的svg模版，这个模版需要一些基础的描述信息，最重要的，它要有<foreignObject></foreignObject>这对标签
- 将要渲染的DOM模版模版嵌入foreignObject
- 利用Blob构建svg图像
- 取出URL，赋值给
<div id='text'>
<h1 style="background-color: #ccc;width: 200px;height: 200px;" >Hello World</h1>
</div>
//此代码仅在chrome测试下通过
function html2Svg (domStr) {
//创建模版字符串
var svgXML=
`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<foreignObject width="100%" height="100%">${generateXML(html)}</foreignObject>
</svg>`
//利用Blob创建svg
var svg = new Blob([svgXML], {type: 'image/svg+xml'})
//利用DOMURL.createObjectURL取出对象
var url = window.URL.createObjectURL(svg);
var img = new Image()
img.src = url
return img
}
// 由于`foreignObject`只能引用XML文档，
// 所以我们需要对DOM进行格式化
function generateXML (domStr) {
var doc = document.implementation.createHTMLDocument('');
doc.write(html);
doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
doc = parseStyle(doc)
console.log(doc)
html = (new XMLSerializer).serializeToString(doc).replace('<!DOCTYPE html>','');
return html
}
可以看到按这个思路来实现非常简单，并且没有了复杂的计算和递归，渲染速度自然要优于前者。然而使用svg，需要考虑诸多的限制问题。一个最为严肃的问题在于：SVG无法加载外部资源,也就是说，在svg里面，无论是还是 或者css中的背景图,这些资源都是无法加载的。在使用canvas实现时，因为我们是一个node一个node去画，所以不存在资源引用的问题。但使用svg实现，相当于我们把文档交给SVG再来来渲染一遍，这对于我们来说是其实是无法控制的黑盒操作，是受SVG限制的
万幸，一个昵称为Christoph Burgmer的小哥写了一个名为rasterizeHTML.js的库，通过一系列的hack技巧替我们绕过了许多限制。我知道你很好奇他是怎么做到的。 简单来讲，rasterizeHTML.js在我们的基础实现上做了这些hack：
- 将<img/>的url 转为 dataURI
- 将background-color从style中取出，修改url后重新插入样式表
- 将link的的样式通过ajax down下来然后注入<style></sytle>
- 详见源码...
当然， rasterizeHTML.js能帮我们做的也不过是处理资源引用问题和浏览器兼容问题，更多的SVG的限制是无法绕过的，该库的文档正式列出了足足一整页的限制，让人读完后心中一凉。比如：
- 跨域资源无法加载
- 如lazyload等通过js加载的资源无法加载
- 内联或js操作background-image无法加载
- 详见文档
思考下rasterizeHTML.js的原理便可理解这些限制无法避免的原因： rasterizeHTML.js只能对已经存在的静态资源进行处理，而对js动态生成并不能实时处理。
目前rasterizeHTML.js已经被用于知乎-意见反馈功能。
参考
源码https://developer.mozilla.org/en-US/docs/Web/API/CanvasAPI/DrawingDOMobjectsintoacanvas
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现网页截图功能
使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:
-
浅析js实现网页截图的两种方式
Web端的截图(生成图片)并不算是个高频的需求,资料自然也不算多,查来查去,也不过Canvas 和 SVG两种实现方案,原理大概相似,都非真正义上的截图而是把DOM转为图片,然而实现方式却截然不同. Canvas 实现 如何将dom转换成canvas图片?自然是要一点点画到canvas里,想想都是件麻烦事.通过分析github的知名截图库 niklasvh/html2canvas (7k+ star)的源码,梳理了其大致的思路: 递归取出目标模版的所有DOM节点,填充到一个rederList,并
-
浅析JS动态创建元素【两种方法】
前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="containe
-
原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设
-
JS使用post提交的两种方式
本文实例讲述了JS使用post提交的两种方式.分享给大家供大家参考,具体如下: 第一种提交post的方式是传统方式,判断浏览器进行post请求. <SCRIPT stype=text/javascript> var xmlobj; //定义XMLHttpRequest对象 function CreateXMLHttpRequest() { if(window.ActiveXObject) //如果当前浏览器支持Active Xobject,则创建ActiveXObject对象 { //xmlo
-
浅析idea 添加项目依赖的两种方式
第一种方式.pom添加 上图: 第二种.在项目上右键 选择自己需要的即可,也有一些不方便的,那就要去pom里边啦!! 附录:IDEA 中 WEB 项目添加依赖的两种方式 注意:每次向 lib 目录中添加 JAR 后都需要执行一次以下操作, 否则找不到添加的依赖 方法一: 方法二: 到此这篇关于idea 添加项目依赖的两种方式的文章就介绍到这了,更多相关idea 添加项目依赖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
-
详解js跨域请求的两种方式，支持post请求
JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上
-
js获取url参数值的两种方式
方法一:正则分析法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return n
-
浅析java中遍历map的两种方式
话不多说,直奔主题,跟着小编一起往下看: 1.先将map对象转成set,然后再转为迭代器 Iterator iterator = map.entrySet().iterator(); while(iterator.hasNext()){ Entry entry = iterator.next(); System.out.println(entry.getKey()); // 获取key System.out.println(entry.getValue()); // 获取value } 2.先将
-
JS实现图片预览的两种方式
考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源. 那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器. 那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取. 方式一: 代码如下: <input type=fil
-
JS获取地址栏参数的两种方法(简单实用)
js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window