javascript-html2canvas翻译

1.github地址:https://github.com/niklasvh/html2canvas2.官网地址：https://html2canvas.hertzen.com3.文档翻译：1>介绍在开始使用html2canvas之前，有必要了解它的相关内容以及局限性1)如何工作脚本遍历页面加载的所有DOM。收集页面所有元素的信息，之后利用获取到的元素的信息来重新构建页面的一个 "表示形式"。换句话说，html2canvas并不是真实的对页面进行截屏，而是根据获取到的页面的DOM属性，来重新构建页面的一个 "表示形式" 而已。因此，html2canvas只能正确的渲染它目前支持的一些属性，意味着有很多 "CSS属性" ，html2canvas可能不支持！2)限制1.当没有代理时，要求页面所有的图片，不能跨域！2.类似的，页面上如果有其他canvas，且该canvas跨域获取内容，则被html2canvas标识为 "已污染"，也是不可读的！3.不支持Flash和Java applets4.不支持iframe标签2>开始使用使用很简单，要渲染的DOM + 传递参数对象html2canvas(element, options);html2canvas(element, {onrendered: function(canvas){// canvas 是最终渲染的 <canvas> 元素}});可用的参数：allowTaint - 是否允许 '跨域图片' 污染canvas(boolean类型：默认值false)background - 当渲染的DOM未指定'background'，设置canvas背景色。如需背景透明，设置 'undefined'。(string类型：默认值 '#fff')width - 设置canvas的宽度，单位为 'px'。设置为 'null'，使用窗口的宽度。(number类型：默认值null)height - 设置canvas的高度，单位为 'px'。设置为 'null'，使用窗口的高度。(number类型：默认值null)letterRendering - 是否分别渲染每一个单词。如果使用了 'letter-spacing'，则需要设置该值为true。(boolean类型：默认值 false)logging - 在控制台中，记录事件。(boolean类型：默认值 false)proxy - 用于加载跨域图片，设置 '代理'。设置为空('')，将不会加载跨域图片。(string类型：默认值 undefined)taintTest - 在绘制每一幅图片之前，是否测试图片，以防污染canvas。(其实就是检测每幅图片是否跨域)(boolean类型：默认值 true)timeout - 设置加载图片的超时时间，单位是 '毫秒'。设置为 '0'，永不超时。(number类型：默认值 0)useCORS - 是否尝试，在 '使用proxy功能' 之前，加载跨域图片，作为 'CORS' 服务(CORS - Cross-origin resource sharing - 跨域资源共享)(boolean类型：默认值 false)4.github readme.md翻译：html2canvas脚本允许我们直接在用户浏览器上，对整个网页或部分网页进行截屏。截屏是基于DOM的，它并非是对实际的屏幕截图，因此可能并非100%精确，基于页面上的可用信息，而构建屏幕截图。不需要从服务器进行任何的渲染，整个图像是在客户机浏览器上的渲染的。因为严重依赖浏览器，所以不支持 nodejs。它也不会神奇地绕过任何浏览器内容策略限制，因此渲染跨域内容，需要代理服务器支持！脚本仍然处于一个非常实验的状态，所以我不建议在生产环境中使用它，也不要开始用它来构建应用程序，因为仍然会有主要的更改。浏览器兼容性：Firebox 3.5+Google ChromeOpera 12+IE9+Safari 6+注意：因为每个CSS属性，需要手动构建来支持，有很多属性目前并未支持！！！(所以，很可能各种不准确！)使用：新版的html2canvas，已经使用了 'Promise'，如果想在旧版本支持 'Promise'，可在引入 'html2canvas' 前，使用 'es6-promise'。es6-promise github地址：https://github.com/stefanpenner/es6-promise新版使用：html2canvas(document.body, options).then(function(canvas){document.body.appendChild(canvas);});旧版使用：html2canvas(document.body, {onrenderd: function(canvas){document.body.appendChild(canvas);},width: xx,...// other options});