介绍
该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于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 | | Whether to allow cross-origin images to taint the canvas |
backgroundColor | | Canvas background color, if none is specified in DOM. Set |
canvas | | Existing |
foreignObjectRendering | | Whether to use ForeignObject rendering if the browser supports it |
imageTimeout | | Timeout for loading an image (in milliseconds). Set to |
ignoreElements | | Predicate function which removes the matching elements from the render. |
logging | | Enable logging for debug purposes |
onclone | | 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 | | 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 | | Whether to cleanup the cloned DOM elements html2canvas creates temporarily |
scale | | The scale to use for rendering. Defaults to the browsers device pixel ratio. |
useCORS | | Whether to attempt to load images from a server using CORS |
width | | The width of the |
height | | The height of the |
x | | Crop canvas x-coordinate |
y | | Crop canvas y-coordinate |
scrollX | | The x-scroll position to used when rendering element, (for example if the Element uses |
scrollY | | The y-scroll position to used when rendering element, (for example if the Element uses |
windowWidth | | Window width to use when rendering |
windowHeight | | Window height to use when rendering |
所有受支持的CSS属性和值的列表:
- background
- background-clip (
Does not support text
- )
- background-color
- background-image
- url()
- linear-gradient()
- radial-gradient()
- background-origin
- background-position
- background-size
- 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不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染,则无法再读取。如果要加载位于页面原点之外的图像,可以使用代理加载图像。
- node.js
为什么不渲染我的图像?
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染,则无法再读取。因此,html2canvas实现了一些方法来检查图像在应用之前是否会污染画布。如果您将allowTaint
选项设置为false
,则不会绘制图像。
如果要加载位于页面原点之外的图像,可以使用代理加载图像。
为什么生产的截屏是空的或者是切断了一半?
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
})
Chrome
Maximum height/width: 32,767 pixels Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
Firefox
Maximum height/width: 32,767 pixels Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
Internet Explorer
Maximum height/width: 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的相关信息。