html2canvas庫(kù)

tml2canvas 是一個(gè) JavaScript 庫(kù)，可以將網(wǎng)頁(yè)中的 HTML 元素和 CSS 樣式轉(zhuǎn)換為 Canvas 繪圖命令，進(jìn)而生成對(duì)應(yīng)的 Canvas 圖像。下面是 html2canvas 的工作原理：

1. 解析頁(yè)面：html2canvas 從指定的 HTML 元素開(kāi)始，遞歸遍歷解析整個(gè)頁(yè)面的 DOM 結(jié)構(gòu)。它會(huì)解析 HTML 元素、CSS 樣式和相關(guān)的計(jì)算屬性。

2. 創(chuàng)建 Canvas：在內(nèi)部，html2canvas 創(chuàng)建一個(gè)隱藏的 Canvas 元素，用于繪制和生成圖像。這個(gè) Canvas 的大小與要繪制的元素的大小相匹配。

3. 將元素繪制到 Canvas：html2canvas 根據(jù)解析的 HTML 元素和計(jì)算的 CSS 屬性，將元素的內(nèi)容繪制到隱藏的 Canvas 上。這其中包括內(nèi)容文本、樣式、背景、邊框、圖像等。

4. 處理跨域資源：在繪制過(guò)程中，如果頁(yè)面中存在跨域的圖片資源，html2canvas 會(huì)使用跨域安全策略（如使用代理服務(wù)器）來(lái)加載并渲染這些圖片。

5. 處理嵌套元素：如果要繪制的元素包含子元素，html2canvas 會(huì)遞歸繪制這些子元素，并確保它們?cè)谡_的位置和層級(jí)上。

6. 處理內(nèi)容溢出：如果要繪制的元素內(nèi)容超出了其可見(jiàn)區(qū)域（溢出），html2canvas 會(huì)進(jìn)行相應(yīng)的裁剪，確保只繪制可見(jiàn)部分。

7. 添加事件處理：在繪制完成后，html2canvas 還可以選擇將某些用戶交互事件，如點(diǎn)擊、懸停等，添加到 Canvas 圖像上。

8. 生成圖像：當(dāng)所有的內(nèi)容都被繪制到 Canvas 上后，html2canvas 將 Canvas 轉(zhuǎn)換為圖像數(shù)據(jù)，可以導(dǎo)出為 base64 編碼的圖片或 Blob 對(duì)象。

需要注意的是，html2canvas 并不能保證繪制過(guò)程中完全準(zhǔn)確地還原頁(yè)面的外觀，因?yàn)樗鼰o(wú)法處理一些復(fù)雜的 CSS 和動(dòng)態(tài)效果。在某些情況下，可能需要對(duì)生成的圖像進(jìn)行后處理，以達(dá)到更準(zhǔn)確的呈現(xiàn)效果。

介

html2canvas庫(kù)允許您直接在用戶瀏覽器上截取網(wǎng)頁(yè)或部分網(wǎng)頁(yè)的“屏幕截圖”。屏幕截圖基于DOM，因此它可能不是真實(shí)表示的100％準(zhǔn)確，因?yàn)樗鼪](méi)有制作實(shí)際的屏幕截圖，而是根據(jù)頁(yè)面上可用的信息構(gòu)建屏幕截圖。目前Github star 17.5K+,可以說(shuō)非常熱門(mén)，最新版本1.0.0-rc.3。以上是官網(wǎng)截圖：

點(diǎn)擊capture按鈕效果截圖：

工作原理

html2canvas庫(kù)通過(guò)讀取DOM以及應(yīng)用于元素的不同樣式，將當(dāng)前頁(yè)面呈現(xiàn)為畫(huà)布圖像。它不需要來(lái)自服務(wù)器的任何渲染，因?yàn)檎麄€(gè)圖像是在客戶端的瀏覽器上創(chuàng)建的。但是，由于它嚴(yán)重依賴于瀏覽器，因此該庫(kù)不適合在nodejs中使用。它也不會(huì)主動(dòng)地規(guī)避任何瀏覽器內(nèi)容策略限制，因此對(duì)應(yīng)呈現(xiàn)跨源內(nèi)容將需要代理來(lái)將內(nèi)容提供給相同的源。

瀏覽器兼容性

該庫(kù)應(yīng)該可以在以下瀏覽器上正常工作（使用Promisepolyfill）：

Firefox 3.5+
谷歌瀏覽器
歌劇院12+
IE9 +
Safari 6+

由于該庫(kù)需要手動(dòng)構(gòu)建每個(gè)CSS屬性以支持，因此還有一些尚不支持的屬性。

目前不支持這些CSS屬性:

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

快速上手

安裝

npm install html2canvas
import html2canvas from 'html2canvas';

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
 <h4 style="color: #000; ">Hello world!</h4>
</div>

JavaScript

html2canvas(document.querySelector("#capture")).then(canvas => {
 document.body.appendChild(canvas)
});

Tips:

html2canvas(element, options), 具體的option如何配置請(qǐng)?jiān)敿?xì)閱讀官方文檔。

者：蜀中亮子

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/ghXm-dySERTFsXEWw79afA

在線咨詢

上一篇：HTML 表格
下一篇：一個(gè)例子說(shuō)明網(wǎng)頁(yè)浮動(dòng)框架的應(yīng)用和靜態(tài)網(wǎng)站使用框架注意事項(xiàng)！

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

html2canvas庫(kù)

介

工作原理

瀏覽器兼容性

快速上手

您的項(xiàng)目需求