JS版页面渲染神器:html2canvas库（js模板渲染）

JavaScript HTML 渲染器

该脚本允许你直接在用户浏览器上对网页或其中一部分进行“截屏”。截屏是基于DOM的，因此对于真实内容的表示可能不是100%准确的，因为它不是生成实际的截图，而是基于页面上可用的信息构建截图。

工作原理

本脚本通过读取DOM和应用于元素的不同样式，将当前页面渲染为一个canvas(画布)图像。

它不需要来自服务器的任何渲染，因为整个图像是在客户机的浏览器上创建的。但是，由于它过度依赖于浏览器，所以这个库不适合在nodejs中使用。它也不会神奇地绕过任何浏览器的内容策略限制，因此在渲染跨域内容时将需要一个代理(https://github.com/niklasvh/html2canvas/wiki/Proxies )j将内容获取到相同的域（http://en.wikipedia.org/wiki/Same_origin_policy ）中。

该脚本目前仍然处于非常实验性的状态，所以我不建议在生产环境中使用它，也不建议使用它构建应用程序，因为我们仍然会对它做较大的更改。

浏览器兼容性

这个库在以下浏览器中应该会运行良好（带有Promise polyfill）:

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

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

用法

本 html2canvas 库利用了Promise，并期望它们在全局上下文中可用。如果你希望支持目前还不支持本地Promise的旧浏览器（http://caniuse.com/#search=promise ），请在包含 html2canvas 库之前先包含一个polyfill，如es6-promise（https://github.com/jakearchibald/es6-promise ）。

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

该函数会返回一个包含<canvas>元素的Promise（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise ）。只需使用then向该Promise添加一个promise执行处理器即可:

构建

你也可以在这里下载已构建好的版本。（https://github.com/niklasvh/html2canvas/releases ）

克隆 git源:

安装依赖：

构建浏览器包：

示例

获取更多信息和示例，请访问主页（https://html2canvas.hertzen.com/ ）或尝试test console（测试控制台 https://html2canvas.hertzen.com/tests/ ）。

贡献

如果你想对本项目贡献代码，请将推送请求发送至开发版分支。在提交任何更改之前，请在所有支持的浏览器上试运行并测试这些更改。如果一些CSS属性不被支持或显示不完整，在提交任何代码之前，请对这些CSS属性创建合适的运行环境进行测试。

英文原文：https://github.com/niklasvh/html2canvas 译者：浣熊君( ????? )