最近在項(xiàng)目中遇到一個(gè)需求，需要提供網(wǎng)頁截圖的功能。百度下發(fā)現(xiàn)html2canvas很好用。那就試試吧。

資源下載地址

插件下載地址：html2canvas下載地址

使用方式

項(xiàng)目使用的react組件開發(fā)方式。參照官方的說明文檔getting-started.md,按照以下步驟進(jìn)行：

1、使用以下命令安裝

npm install html2canvas --save

2、在文件中引入html2canvas

import html2canvas from 'html2canvas';

3、文件中的使用

html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});

遇到的問題

按照這個(gè)方式使用，頁面沒有滾動(dòng)條還行，有滾動(dòng)條時(shí)出現(xiàn)大片空白。

錯(cuò)誤截圖如下：

解決方案

仔細(xì)看了一下configuration.md和網(wǎng)友的分析，最終解決。代碼片段如下

上一張正確的截圖如下：

代碼中的配置項(xiàng)說明

1、截圖產(chǎn)生空白是因?yàn)槿萜鞲叨仍O(shè)置的問題，設(shè)置windowHeight的高度等于頁面包含滾動(dòng)條的高度即可獲取滾動(dòng)條中的內(nèi)容。這一條就可以解決空白的問題。
2、設(shè)置width、height屬性的原因是，我們?cè)陧撁嬷薪貓D顯示的區(qū)域?qū)挾群透叨仁枪潭ǖ模褪钱?dāng)前屏幕的可見區(qū)域。
3、設(shè)置x、y坐標(biāo)的原因是由于頁面在有滾動(dòng)條的時(shí)候，需要指定截圖的起始位置。本項(xiàng)目中x軸方向不存在滾動(dòng)條，所以設(shè)置為零；y方向有滾動(dòng)條，所以需要獲取一下當(dāng)前方向的滾動(dòng)坐標(biāo)。
4、一般網(wǎng)頁中會(huì)有圖片，圖片中有鏈接地址時(shí)，設(shè)置useCORS屬性可保證圖片的加載。

到此這篇關(guān)于html2canvas截圖空白問題的解決的文章就介紹到這了,更多相關(guān)html2canvas截圖空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！