介紹
該腳本允許您直接在用戶瀏覽器上截取網頁或部分網頁的“屏幕截圖”。屏幕截圖基於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
- background-clip (Does not support
-
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不會解決您的瀏覽器設置的內容政策限制。繪制位於當前頁面原點之外的圖像會污染它們所繪制的畫布。如果畫布受到污染，則無法再讀取。如果要加載位於頁面原點之外的圖像，可以使用代理加載圖像。
為什么不渲染我的圖像？
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的相關信息。