最近做项目的时候,需要用到浏览器截图,这里并不是指浏览器插件的截图,我使用的是 html2canvas ,html2canvas是一个JS脚本.
下面我将简单介绍一下html2canvas的使用与局限性,其实介绍和描述官网已经说的很清楚的了
介绍
该脚本允许您直接在用户浏览器上截取网页或其部分的“截图”。屏幕截图基于DOM，因此可能不是100％准确的真实表示，因为它没有制作实际的屏幕截图，而是根据页面上提供的信息构建屏幕截图。
怎么运行的
脚本遍历它加载的页面的DOM。它收集所有元素的信息，然后用它来构建页面的表示。换句话说，它实际上并不是对页面进行截图，而是基于从DOM读取的属性来构建它的表示。
因此，它只能正确地渲染它理解的属性，这意味着有许多CSS属性不起作用。有关支持的CSS属性的完整列表，请查看 支持的功能页面。
限制
脚本使用的所有图像需要位于相同的原始位置 ，以便能够在没有代理的帮助下阅读它们。同样的，如果canvas 页面上有其他元素，这些元素已经被交叉源内容污染了，它们将会变脏，不再被html2canvas读取。
该脚本不呈现插件内容，如Flash或Java小程序。
浏览器兼容性
图书馆应该在下面的浏览器（使用Promisepolyfill）上正常工作：
- Firefox 3.5+
- 谷歌浏览器
- Opera 12+
- IE9 +
- 边缘
- Safari 6+
翻译: Google翻译
我的理解: 其实不是真正的截图,屏幕截图基于DOM,根据页面上提供的信息构建屏幕截图, 也就是说呢, 这东西,不支持CSS的, 它截图的时候只会获取DOM ,所以截图出来的信息大打折扣.
而且,并不支持远古浏览器,比如,IE9以下的.等等,,,,这些都是他的限制.
使用方法,很简单
javascript
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript"> function go() { setTimeout(function(){ html2canvas( [ document.body ], { onrendered: function(canvas) { document.body.appendChild(canvas); } }); html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) }); },1500) </script>
HTML
<body> <div id="capture" style="background: coral"> <h2>this is <b>bold</b> <span style="color:red">red</span></h2> </div> <input type="button" value="生成" onclick="go()" /> </body>