整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tml2canvas 是一個 JavaScript 庫，可以將網頁中的 HTML 元素和 CSS 樣式轉換為 Canvas 繪圖命令，進而生成對應的 Canvas 圖像。下面是 html2canvas 的工作原理：
1. 解析頁面：html2canvas 從指定的 HTML 元素開始，遞歸遍歷解析整個頁面的 DOM 結構。它會解析 HTML 元素、CSS 樣式和相關的計算屬性。
2. 創建 Canvas：在內部，html2canvas 創建一個隱藏的 Canvas 元素，用于繪制和生成圖像。這個 Canvas 的大小與要繪制的元素的大小相匹配。
3. 將元素繪制到 Canvas：html2canvas 根據解析的 HTML 元素和計算的 CSS 屬性，將元素的內容繪制到隱藏的 Canvas 上。這其中包括內容文本、樣式、背景、邊框、圖像等。
4. 處理跨域資源：在繪制過程中，如果頁面中存在跨域的圖片資源，html2canvas 會使用跨域安全策略（如使用代理服務器）來加載并渲染這些圖片。
5. 處理嵌套元素：如果要繪制的元素包含子元素，html2canvas 會遞歸繪制這些子元素，并確保它們在正確的位置和層級上。
6. 處理內容溢出：如果要繪制的元素內容超出了其可見區域（溢出），html2canvas 會進行相應的裁剪，確保只繪制可見部分。
7. 添加事件處理：在繪制完成后，html2canvas 還可以選擇將某些用戶交互事件，如點擊、懸停等，添加到 Canvas 圖像上。
8. 生成圖像：當所有的內容都被繪制到 Canvas 上后，html2canvas 將 Canvas 轉換為圖像數據，可以導出為 base64 編碼的圖片或 Blob 對象。
需要注意的是，html2canvas 并不能保證繪制過程中完全準確地還原頁面的外觀，因為它無法處理一些復雜的 CSS 和動態效果。在某些情況下，可能需要對生成的圖像進行后處理，以達到更準確的呈現效果。
html2canvas庫允許您直接在用戶瀏覽器上截取網頁或部分網頁的“屏幕截圖”。屏幕截圖基于DOM，因此它可能不是真實表示的100％準確，因為它沒有制作實際的屏幕截圖，而是根據頁面上可用的信息構建屏幕截圖。目前Github star 17.5K+,可以說非常熱門，最新版本1.0.0-rc.3。以上是官網截圖：
點擊capture按鈕效果截圖：
html2canvas庫通過讀取DOM以及應用于元素的不同樣式，將當前頁面呈現為畫布圖像。它不需要來自服務器的任何渲染，因為整個圖像是在客戶端的瀏覽器上創建的。但是，由于它嚴重依賴于瀏覽器，因此該庫不適合在nodejs中使用。它也不會主動地規避任何瀏覽器內容策略限制，因此對應呈現跨源內容將需要代理來將內容提供給相同的源。
該庫應該可以在以下瀏覽器上正常工作（使用Promisepolyfill）：
由于該庫需要手動構建每個CSS屬性以支持，因此還有一些尚不支持的屬性。
目前不支持這些CSS屬性:
安裝
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如何配置請詳細閱讀官方文檔。
者：蜀中亮子
轉發鏈接：https://mp.weixin.qq.com/s/ghXm-dySERTFsXEWw79afA
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
