溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何解決html2canvas截圖空白問題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
資源下載地址
插件下載地址：html2canvas下載地址
使用方式
項目使用的react組件開發方式。參照官方的說明文檔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);
});遇到的問題
按照這個方式使用，頁面沒有滾動條還行，有滾動條時出現大片空白。
錯誤截圖如下：
解決方案
仔細看了一下configuration.md和網友的分析，最終解決。代碼片段如下
上一張正確的截圖如下：
代碼中的配置項說明
1、截圖產生空白是因為容器高度設置的問題，設置windowHeight的高度等于頁面包含滾動條的高度即可獲取滾動條中的內容。這一條就可以解決空白的問題。
2、設置width、height屬性的原因是，我們在頁面中截圖顯示的區域寬度和高度是固定的，就是當前屏幕的可見區域。
3、設置x、y坐標的原因是由于頁面在有滾動條的時候，需要指定截圖的起始位置。本項目中x軸方向不存在滾動條，所以設置為零；y方向有滾動條，所以需要獲取一下當前方向的滾動坐標。
4、一般網頁中會有圖片，圖片中有鏈接地址時，設置useCORS屬性可保證圖片的加載。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
看完了這篇文章，相信你對“如何解決html2canvas截圖空白問題”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
