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

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?