0
点赞
收藏
分享

微信扫一扫

对html2canvas的研究

weipeng2k 2022-12-13 阅读 88

介绍

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

canvas

​null​

Existing ​​canvas​

foreignObjectRendering

​false​

Whether to use ForeignObject rendering if the browser supports it

imageTimeout

​15000​

Timeout for loading an image (in milliseconds). Set to ​​0​

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​

The width of the ​​canvas​

height

​Element​

The height of the ​​canvas​

x

​Element​

Crop canvas x-coordinate

y

​Element​

Crop canvas y-coordinate

scrollX

​Element​

The x-scroll position to used when rendering element, (for example if the Element uses ​​position: fixed​​)

scrollY

​Element​

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

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

 

 

举报

相关推荐

0 条评论