正文

对html2canvas的研究

IP云
IP云V管理员/5 阅读
09/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

介绍

该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于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);
});
所有可用的配置选项：

NameDefaultDescription
allowTaintfalseWhether to allow cross-origin images to taint the canvas
backgroundColor#ffffffCanvas background color, if none is specified in DOM. Set null for transparent
canvasnullExisting canvas element to use as a base for drawing on
foreignObjectRenderingfalseWhether to use ForeignObject rendering if the browser supports it
imageTimeout15000Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.
ignoreElements(element) => falsePredicate function which removes the matching elements from the render.
loggingtrueEnable logging for debug purposes
onclonenullCallback 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.
proxynullUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
removeContainertrueWhether to cleanup the cloned DOM elements html2canvas creates temporarily
scalewindow.devicePixelRatioThe scale to use for rendering. Defaults to the browsers device pixel ratio.
useCORSfalseWhether to attempt to load images from a server using CORS
widthElement widthThe width of the canvas
heightElement heightThe height of the canvas
xElement x-offsetCrop canvas x-coordinate
yElement y-offsetCrop canvas y-coordinate
scrollXElement scrollXThe x-scroll position to used when rendering element, (for example if the Element uses position: fixed)
scrollYElement scrollYThe y-scroll position to used when rendering element, (for example if the Element uses position: fixed)
windowWidthWindow.innerWidthWindow width to use when rendering Element, which may affect things like Media queries
windowHeightWindow.innerHeightWindow 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的相关信息。