对html2canvas的研究

介绍

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

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