Learn about html2canvas, how it works and some of its limitations
了解 html2canvas、它是如何工作的以及它的一些限制
Before you get started with the script, there are a few things that are good to know regarding the script and some of its limitations.
在您开始使用该脚本之前，有一些关于该脚本及其局限性的事情需要了解。
介绍 Introduction
The script allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
该脚本允许你直接在用户浏览器中“截屏”一个网页或者其中的一部分。
截图是基于DOM的，因此可能不是100%准确的真实表示，因为它并没有生成真正的截图，而是根据页面上可用的信息构建截图。
工作原理 How it works
The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
As a result, it is only able to render correctly properties that it understands, meaning there are many CSS properties which do not work. For a full list of supported CSS properties, check out the supported features page.
脚本遍历页面中加载的DOM结构，收集用来构建页面画像的所有元素的信息。换句话说，它不是直接在页面上截图，而是根据它从DOM结构读取的属性构建画像。
也因此，它只能正确渲染它可以理解的属性，这也就意味着，有许多CSS属性是不能起作用的。你可以在支持的属性页面查看所有可以支持的CSS属性
使用限制 Limitations
All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
The script doesn’t render plugin content such as Flash or Java applets.
脚本使用的所有图像都需要存放在同一域名下（满足同源策略），以便它能够在没有代理帮助的情况下读取它们。
相似的，如果你在页面中有其它canvas元素且元素内包含跨域内容（比如canvas中绘制了跨域的图像），则该元素就会被视为污染的，html2canvas将不会再读取/绘制该元素。（也就是出现绘制内容缺失的情况）
浏览器兼容性 Browser compatibility
The library should work fine on the following browsers (with Promise polyfill)：
该库在以下浏览器上会良好工作（需要使用Promise polyfill）:
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Edge
- Safari 6+
若有收获，就点个赞吧
0 人点赞
