Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。
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]);
构建
克隆 git源:
安装依赖:
构建浏览器包:
示例
贡献
如果你想对本项目贡献代码,请将推送请求发送至开发版分支。在提交任何更改之前,请在所有支持的浏览器上试运行并测试这些更改。如果一些CSS属性不被支持或显示不完整,在提交任何代码之前,请对这些CSS属性创建合适的运行环境进行测试。英文原文:https://github.com/niklasvh/html2canvas
译者:浣熊君( ・᷄৺・᷅ )