介绍
该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
这个怎么运作
该脚本遍历其加载的页面的DOM。它收集有关那里所有元素的信息，然后用它来构建页面的表示。换句话说，它实际上并不截取页面的截图，而是基于从DOM读取的属性构建它的表示。
因此，它只能正确呈现它理解的属性，这意味着有许多CSS属性不起作用。有关支持的CSS属性的完整列表，请查看 支持的功能页面http://html2canvas.hertzen.com/features/
限制
脚本使用的所有图像都需要位于同源下，以便能够在没有代理帮助的情况下读取它们。同样，如果您canvas 在页面上有其他元素，这些元素已被污染了跨源内容，它们将变得脏，并且不再被html2canvas读取。
该脚本不会呈现插件内容，如Flash或Java小程序。
支持的浏览器版本：
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Edge
- Safari 6+
npm install html2canvas
import html2canvas from 'html2canvas';html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); });
所有可用的配置选项：
| Name | Default | Description |
|---|---|---|
| allowTaint | false |
Whether to allow cross-origin images to taint the canvas |
| backgroundColor | #ffffff |
Canvas background color, if none is specified in DOM. Set null for transparent |
| canvas | null |
Existing canvas element to use as a base for drawing on |
| foreignObjectRendering | false |
Whether to use ForeignObject rendering if the browser supports it |
| imageTimeout | 15000 |
Timeout for loading an image (in milliseconds). Set to 0 to disable timeout. |
| ignoreElements | (element) => false |
Predicate function which removes the matching elements from the render. |
| logging | true |
Enable logging for debug purposes |
| onclone | null |
Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document. |
| proxy | null |
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded. |
| removeContainer | true |
Whether to cleanup the cloned DOM elements html2canvas creates temporarily |
| scale | window.devicePixelRatio |
The scale to use for rendering. Defaults to the browsers device pixel ratio. |
| useCORS | false |
Whether to attempt to load images from a server using CORS |
| width | Element width |
The width of the canvas |
| height | Element height |
The height of the canvas |
| x | Element x-offset |
Crop canvas x-coordinate |
| y | Element y-offset |
Crop canvas y-coordinate |
| scrollX | Element scrollX |
The x-scroll position to used when rendering element, (for example if the Element uses position: fixed) |
| scrollY | Element scrollY |
The y-scroll position to used when rendering element, (for example if the Element uses position: fixed) |
| windowWidth | Window.innerWidth |
Window width to use when rendering Element, which may affect things like Media queries |
| windowHeight | Window.innerHeight |
Window height to use when rendering Element, which may affect things like Media queries |
所有受支持的CSS属性和值的列表：
-
background
- background-clip (Does not support
text) - background-color
-
background-image
- url()
- linear-gradient()
- radial-gradient()
- background-origin
- background-position
- background-size
- background-clip (Does not support
-
border
- border-color
- border-radius
- border-style (Only supports
solid) - border-width
-
bottom
-
box-sizing
-
content
-
color
-
display
-
flex
-
float
-
font
- font-family
- font-size
- font-style
- font-variant
- font-weight
-
height
-
left
-
letter-spacing
-
line-break
-
list-style
- list-style-image
- list-style-position
- list-style-type
-
margin
-
max-height
-
max-width
-
min-height
-
min-width
-
opacity
-
overflow
-
overflow-wrap
-
padding
-
position
-
right
-
text-align
-
text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style (Only supports
solid)
-
text-shadow
-
text-transform
-
top
-
transform (Limited support)
-
visibility
-
white-space
-
width
-
word-break
-
word-spacing
-
word-wrap
-
z-index
Unsupported CSS properties
These CSS properties are NOT currently supported
- background-blend-mode
- border-image
- box-decoration-break
- box-shadow
- filter
- font-variant-ligatures
- mix-blend-mode
- object-fit
- repeating-linear-gradient()
- writing-mode
- zoom
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染，则无法再读取。如果要加载位于页面原点之外的图像，可以使用代理加载图像。
为什么不渲染我的图像？
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染，则无法再读取。因此，html2canvas实现了一些方法来检查图像在应用之前是否会污染画布。如果您将allowTaint选项设置为false，则不会绘制图像。
如果要加载位于页面原点之外的图像，可以使用代理加载图像。
为什么生产的截屏是空的或者是切断了一半？
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
})
Chrome
Maximum height/ 32,767 pixels Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
Firefox
Maximum height/ 32,767 pixels Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
Internet Explorer
Maximum height/ 8,192 pixels Maximum area: N/A
iOS
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
为什么CSS属性X没有正确呈现或仅部分呈现？
由于每个CSS属性都需要手动编码才能正确呈现，因此html2canvas 永远不会有完整的CSS支持。该库试图在可能的范围内支持最常用的CSS属性。如果某些CSS属性缺失或不完整，并且您认为它应该是库的一部分，请为其创建测试用例并为其创建新问题。
如何让html2canvas在浏览器扩展中工作？
您不应在浏览器扩展中使用html2canvas。大多数浏览器都支持从扩展中的选项卡捕获屏幕截图。Chrome和 Firefox的相关信息。