介

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ō)非常熱門，最新版本1.0.0-rc.3。以上是官網(wǎng)截圖：

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

工作原理

html2canvas庫(kù)通過(guò)讀取DOM以及應(yīng)用于元素的不同樣式，將當(dāng)前頁(yè)面呈現(xiàn)為畫布圖像。它不需要來(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ì)閱讀官方文檔。