README

主页 | 下载 | 问题 | 捐赠

JavaScript HTML渲染器

该脚本允许您直接在用户的浏览器中捕获网页或其部分的内容“截图”。由于截图基于DOM，因此它可能无法完全准确反映真实表示，因为它并不真正进行截图，而是根据页面上的信息构建截图。

###它是如何工作的？### 该脚本通过读取DOM和应用于元素的不同样式将当前页面渲染为canvas图像。

它**不需要服务器端渲染**，因为整个图像都是在**客户端浏览器**上创建的。然而，由于它高度依赖于浏览器，因此此库**不适用于在nodejs中使用**。它也不能神奇地绕过任何浏览器内容策略限制，因此渲染跨源内容需要代理来将内容传递到相同源。

该脚本仍然处于**非常实验性状态**，因此我建议不要在生产环境中使用它，也不要开始使用它构建应用程序，因为仍将进行重大更改。

###浏览器兼容性###

该库应该在以下浏览器上运行良好（需要Promise填充程序）

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

由于每个CSS属性都需要手动构建才能得到支持，因此有许多属性尚未得到支持。

用法

html2canvas库使用Promise，并期望它们在全局上下文中可用。如果您希望支持不原生支持Promise的旧浏览器，请在包含html2canvas之前包含一个填充程序，如es6-promise。

注意！ 这些说明适用于使用0.5版本的当前开发版本，对于最新发布版本（0.4.1），请查看旧版readme。

要使用html2canvas渲染element，只需调用： html2canvas(element[, options]);

该函数返回一个包含<canvas>元素的Promise。只需使用then将满足处理程序添加到Promise中。

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

构建

该库使用grunt进行构建。或者，您可以从此处下载最新的构建版本。

使用子模块克隆git存储库

$ git clone --recursive git://github.com/niklasvh/html2canvas.git

安装Grunt和uglifyjs

$ npm install -g grunt-cli uglify-js

运行完整构建过程（包括代码检查、qunit和webdriver测试）

$ grunt

跳过代码检查和测试，仅从源代码构建

$ grunt build

运行测试

该库包含两组测试。第一组是一系列qunit测试，用于检查浏览器解析的不同值在html2canvas中的转换是否正确。要使用grunt运行这些测试，您需要phantomjs。

另一组测试使用webdriver运行Firefox、Chrome和Internet Explorer。这些测试需要selenium独立服务器（Java运行），可以从这里下载。这些测试会从测试页面捕获实际截图，并将图像与html2canvas创建的截图进行比较，计算百分比差异。这些测试通常不会提供100%的匹配，但在提交更改时，这些值通常不应低于基线值。

首先下载依赖项

$ npm install

运行qunit测试

$ grunt test

示例

有关更多信息示例，请访问主页或尝试测试控制台。

贡献

如果您想为该项目做出贡献，请将pull请求发送到develop分支。在提交任何更改之前，请尝试确保更改与所有支持的浏览器兼容。如果某些CSS属性不受支持或不完整，请在提交任何代码更改之前，为它创建适当的测试。