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