小編給大家分享一下如何解決html2canvas截圖空白問(wèn)題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、樟樹(shù)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為樟樹(shù)等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

資源下載地址

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

使用方式

項(xiàng)目使用的react組件開(kāi)發(fā)方式。參照官方的說(shuō)明文檔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);
});

遇到的問(wèn)題

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

錯(cuò)誤截圖如下：

解決方案

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

上一張正確的截圖如下：

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

1、截圖產(chǎn)生空白是因?yàn)槿萜鞲叨仍O(shè)置的問(wèn)題，設(shè)置windowHeight的高度等于頁(yè)面包含滾動(dòng)條的高度即可獲取滾動(dòng)條中的內(nèi)容。這一條就可以解決空白的問(wèn)題。
2、設(shè)置width、height屬性的原因是，我們?cè)陧?yè)面中截圖顯示的區(qū)域?qū)挾群透叨仁枪潭ǖ?，就是?dāng)前屏幕的可見(jiàn)區(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屬性可保證圖片的加載。

html是什么

html的全稱(chēng)為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

看完了這篇文章，相信你對(duì)“如何解決html2canvas截圖空白問(wèn)題”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱(chēng)：如何解決html2canvas截圖空白問(wèn)題-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/docgci.html