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