对html2canvas的研究

2024-02-05 20:27:22

介绍

该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于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
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

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的相关信息。

码农公寓

介绍