html2canvas

html2canvas
首页|下载|问题|捐赠

JavaScript HTML渲染器
该脚本允许你直接在用户浏览器上截取网页或部分网页的“截图”。屏幕截图是基于DOM的，因此与真实的表示可能不是100%准确的，因为它并不是一个实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。

自定义构建
这是一个由Erik Koopmans定制的版本，具有最新的bug修复和特性。这里的所有更改都已作为Pull请求提交给niklasvh/html2canvas，正在等待批准。这些变化包括:
bug修正:屏幕外渲染，裁剪与CSS转换，连接。
特性:Box-shadows和自定义分辨率/缩放。

它是如何工作的?
该脚本通过读取DOM和应用于元素的不同样式，将当前页面呈现为画布图像。
它不需要来自服务器的任何呈现，因为整个图像是在客户机浏览器上创建的。但是，由于它严重依赖于浏览器，这个库不适合在nodejs中使用。
它也没有神奇地规避任何浏览器内容策略限制，因此呈现跨源内容将需要一个代理来将内容发送到相同的源。
该脚本仍处于非常试验的状态，因此我不建议在生产环境中使用它，也不建议开始用它构建应用程序，因为仍然会有重大的更改。
浏览器兼容性
这个库应该可以在以下浏览器上正常工作(使用承诺的polyfill):

Firefox 3.5 +
谷歌浏览器
歌剧12 +
IE9 +
Safari 6 +

由于每个CSS属性都需要手工构建才能得到支持，因此还有许多属性尚未得到支持。
使用
html2canvas库利用了承诺，并期望它们在全局上下文中可用。如果你想
支持原生不支持承诺的旧浏览器，请包括一个填充如
包括html2canvas之前的es6-promise。
注意!这些说明用于使用当前的开发版本0.5，对于最新的发布版本(0.4.1)，请签出旧的自述文件。
要用html2canvas呈现一个元素，只需调用:
html2canvas(元素[选项]);
函数返回一个承诺，其中包含了元素。只需使用then向承诺添加一个promise fullfillment处理程序:
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});

建筑
这个图书馆用泉水来建图书馆。或者，您可以从这里下载最新的版本。
克隆带有子模块的git仓库:
$ git clone --recursive git://github.com/niklasvh/html2canvas.git

安装Grunt和uglifyjs:
$ npm install -g grunt-cli uglify-js

运行完整的构建过程(包括lint, qunit和webdriver测试):
$ grunt

跳过皮棉和测试，并简单地建立从源代码:
$ grunt build

运行测试
该库有两组测试。第一组是一些qunit测试，用于检查浏览器解析的不同值是否在html2canvas中正确转换。要用grunt进行这些测试，你需要幻影。
另一组测试使用webdriver运行Firefox、Chrome和Internet Explorer。这些测试需要selenium独立服务器(运行在Java上)，可以从这里下载。他们从测试页面中捕获实际的屏幕截图，并将图像与html2canvas创建的屏幕截图进行比较，并计算百分比差异。这些测试通常不期望提供100%的匹配，但是当进行更改时，这些通常不应该从基线值下降。
先下载依赖项:
$ npm install

qunit运行测试:
$ grunt test

例子
有关更多信息和示例，请访问主页或尝试测试控制台。
贡献
如果您希望为项目做出贡献，请发送拉请求到开发分支。在提交任何更改之前，尝试并测试更改是否能在所有支持的浏览器上工作。如果某些CSS属性不受支持或不完整，请在提交任何代码更改之前为其创建适当的测试。本文转载于：http://www.diyabc.com/frontweb/news33277.html