當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

对html2canvas的研究

發布時間：2023/12/13 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了对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); });
所有可用的配置選項： 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不會解決您的瀏覽器設置的內容政策限制。繪制位于當前頁面原點之外的圖像會污染它們所繪制的畫布。如果畫布受到污染，則無法再讀取。如果要加載位于頁面原點之外的圖像，可以使用代理加載圖像。

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

轉載于:https://www.cnblogs.com/zhouyideboke/p/11315289.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html2canvas

上一篇：解决RM删除没有释放空间问题
下一篇：洛谷 P3243 【[HNOI2015]