介紹

? ? ? ? ?該腳本允許您直接在用戶瀏覽器上截取網(wǎng)頁或部分網(wǎng)頁的“屏幕截圖”。屏幕截圖基于DOM，因此它可能不是真實(shí)表示的100％準(zhǔn)確，因?yàn)樗鼪]有制作實(shí)際的屏幕截圖，而是根據(jù)頁面上可用的信息構(gòu)建屏幕截圖。

這個(gè)怎么運(yùn)作

該腳本遍歷其加載的頁面的DOM。它收集有關(guān)那里所有元素的信息，然后用它來構(gòu)建頁面的表示。換句話說，它實(shí)際上并不截取頁面的截圖，而是基于從DOM讀取的屬性構(gòu)建它的表示。?

因此，它只能正確呈現(xiàn)它理解的屬性，這意味著有許多CSS屬性不起作用。有關(guān)支持的CSS屬性的完整列表，請(qǐng)查看?支持的功能頁面http://html2canvas.hertzen.com/features/

限制

腳本使用的所有圖像都需要位于同源下，以便能夠在沒有代理幫助的情況下讀取它們。同樣，如果您canvas?在頁面上有其他元素，這些元素已被污染了跨源內(nèi)容，它們將變得臟，并且不再被html2canvas讀取。

該腳本不會(huì)呈現(xiàn)插件內(nèi)容，如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); });
所有可用的配置選項(xiàng)： NameDefaultDescription

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不會(huì)解決您的瀏覽器設(shè)置的內(nèi)容政策限制。繪制位于當(dāng)前頁面原點(diǎn)之外的圖像會(huì)污染它們所繪制的畫布。如果畫布受到污染，則無法再讀取。如果要加載位于頁面原點(diǎn)之外的圖像，可以使用代理加載圖像。

• node.js

為什么不渲染我的圖像？

html2canvas不會(huì)解決您的瀏覽器設(shè)置的內(nèi)容政策限制。繪制位于當(dāng)前頁面原點(diǎn)之外的圖像會(huì)污染它們所繪制的畫布。如果畫布受到污染，則無法再讀取。因此，html2canvas實(shí)現(xiàn)了一些方法來檢查圖像在應(yīng)用之前是否會(huì)污染畫布。如果您將allowTaint選項(xiàng)設(shè)置為false，則不會(huì)繪制圖像。

如果要加載位于頁面原點(diǎn)之外的圖像，可以使用代理加載圖像。

為什么生產(chǎn)的截屏是空的或者是切斷了一半？

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沒有正確呈現(xiàn)或僅部分呈現(xiàn)？

由于每個(gè)CSS屬性都需要手動(dòng)編碼才能正確呈現(xiàn)，因此html2canvas?永遠(yuǎn)不會(huì)有完整的CSS支持。該庫試圖在可能的范圍內(nèi)支持最常用的CSS屬性。如果某些CSS屬性缺失或不完整，并且您認(rèn)為它應(yīng)該是庫的一部分，請(qǐng)為其創(chuàng)建測試用例并為其創(chuàng)建新問題。

如何讓html2canvas在瀏覽器擴(kuò)展中工作？

您不應(yīng)在瀏覽器擴(kuò)展中使用html2canvas。大多數(shù)瀏覽器都支持從擴(kuò)展中的選項(xiàng)卡捕獲屏幕截圖。Chrome和?Firefox的相關(guān)信息。

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhouyideboke/p/11315289.html

總結(jié)

以上是生活随笔為你收集整理的对html2canvas的研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。