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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了宿豫免費建站歡迎大家使用！

資源下載地址

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

使用方式

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

1、使用以下命令安裝

npm install html2canvas --save

2、在文件中引入html2canvas

import html2canvas from 'html2canvas';

3、文件中的使用

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

遇到的問題

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

錯誤截圖如下：

解決方案

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

上一張正確的截圖如下：

代碼中的配置項說明

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

html是什么

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

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

文章題目：如何解決html2canvas截圖空白問題
本文來源：http://chinadenli.net/article22/gicecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)建站、虛擬主機、品牌網(wǎng)站設(shè)計、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)