浏览器的截图实现

最近做项目的时候,需要用到浏览器截图,这里并不是指浏览器插件的截图,我使用的是 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>

 

posted @ 2017-12-21 11:41  yccMelody  阅读(506)  评论(0)  编辑  收藏  举报
Fork me on GitHub