在之前的html5中的canvas介紹結(jié)束之后,就收到很多小伙伴的提問“如何解決html2canvas截圖空白問題?”那么今天就和大家分享有關(guān)于這個(gè)問題的解決方法!
資源下載地址
插件下載地址: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è)方式使用,頁(yè)面沒有滾動(dòng)條還行,有滾動(dòng)條時(shí)出現(xiàn)大片空白。
錯(cuò)誤截圖如下:
解決方案
仔細(xì)看了一下configuration.md和網(wǎng)友的分析,最終解決。代碼片段如下
上一張正確的截圖如下:
代碼中的配置項(xiàng)說明
1、截圖產(chǎn)生空白是因?yàn)槿萜鞲叨仍O(shè)置的問題,設(shè)置windowHeight的高度等于頁(yè)面包含滾動(dòng)條的高度即可獲取滾動(dòng)條中的內(nèi)容。這一條就可以解決空白的問題。
2、設(shè)置width、height屬性的原因是,我們?cè)陧?yè)面中截圖顯示的區(qū)域?qū)挾群透叨仁枪潭ǖ?,就是?dāng)前屏幕的可見區(qū)域。
3、設(shè)置x、y坐標(biāo)的原因是由于頁(yè)面在有滾動(dòng)條的時(shí)候,需要指定截圖的起始位置。本項(xiàng)目中x軸方向不存在滾動(dòng)條,所以設(shè)置為零;y方向有滾動(dòng)條,所以需要獲取一下當(dāng)前方向的滾動(dòng)坐標(biāo)。
4、一般網(wǎng)頁(yè)中會(huì)有圖片,圖片中有鏈接地址時(shí),設(shè)置useCORS屬性可保證圖片的加載。
在通過文章和代碼小伙伴們對(duì)于“如何解決html2canvas截圖空白問題?”這個(gè)問題的疑問相信都有解開了吧!那么今天我們的文章就分享到這里啦!更多的相關(guān)內(nèi)容我們都可以在W3Cschool進(jìn)行瀏覽閱讀與學(xué)習(xí)!