该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
该脚本遍历其加载的页面的DOM。它收集有关那里所有元素的信息，然后用它来构建页面的表示。换句话说，它实际上并不截取页面的截图，而是基于从DOM读取的属性构建它的表示。
因此，它只能正确呈现它理解的属性，这意味着有许多CSS属性不起作用。有关支持的CSS属性的完整列表，请查看 支持的功能页面http://html2canvas.hertzen.com/features/
脚本使用的所有图像都需要位于同源下，以便能够在没有代理帮助的情况下读取它们。同样，如果您canvas 在页面上有其他元素，这些元素已被污染了跨源内容，它们将变得脏，并且不再被html2canvas读取。
该脚本不会呈现插件内容，如Flash或Java小程序。
支持的浏览器版本：
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
text)background-image
border
solid)bottom
box-sizing
content
color
display
flex
float
font
height
left
letter-spacing
line-break
list-style
margin
max-height
max-width
min-height
min-width
opacity
overflow
overflow-wrap
padding
position
right
text-align
text-decoration
solid)text-shadow
text-transform
top
transform (Limited support)
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index
These CSS properties are NOT currently supported
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染，则无法再读取。如果要加载位于页面原点之外的图像，可以使用代理加载图像。
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染，则无法再读取。因此，html2canvas实现了一些方法来检查图像在应用之前是否会污染画布。如果您将allowTaint选项设置为false，则不会绘制图像。
如果要加载位于页面原点之外的图像，可以使用代理加载图像。
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
})
Maximum height/width: 32,767 pixels Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
Maximum height/width: 32,767 pixels Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
Maximum height/width: 8,192 pixels Maximum area: N/A
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属性都需要手动编码才能正确呈现，因此html2canvas 永远不会有完整的CSS支持。该库试图在可能的范围内支持最常用的CSS属性。如果某些CSS属性缺失或不完整，并且您认为它应该是库的一部分，请为其创建测试用例并为其创建新问题。
您不应在浏览器扩展中使用html2canvas。大多数浏览器都支持从扩展中的选项卡捕获屏幕截图。Chrome和 Firefox的相关信息。
原文：https://www.cnblogs.com/zhouyideboke/p/11315289.html