html2canvas.js插件截圖空白問題
發現使用
html2canvas.js插件截圖保存在前端很方便。學習過程中預計問題。
截圖出現空白和截圖不全。
問題原因：
html2canvas.js插件截圖是基於body標籤的，如果body存在滾動條就會出現截圖空白的情況。如何避免：
關鍵點：在截圖前將滾動條位置設置在頂部。截圖時，截圖選擇內容標籤不是body，就將截圖寬度和高度設置為選擇標籤的寬高在截圖。
具體程式碼：
<!-- 海報彈窗 -->
<div class="dialog flex" id="alert10" style="display:none" >
<div class="poster_con">
<div class="poster" id="contbox">
<div class="qrcode" id="qrcode">
</div>
</div>
<div class="poster_btn"><button id="down">點擊保存圖片分享給好友</button><a id="down1" class="down" href="" download="downImg" style="display:none"></a></div>
</div> </div>
js程式碼：
$("#down").click(function(){
// 截圖前先講滾動條置頂
$('html,body').animate({'scrollTop':0});
// document.getElementById("contbox") 需要截圖的是div標籤
html2canvas(document.getElementById("contbox"),
{logging:false,
width:$("#contbox").width(),// 寬設置為div標籤的寬
height:$("#contbox").height(),// 高設置為div標籤的高
useCORS:true}).then(function(canvas) {
//將canvas畫布放大若干倍，然後盛放在較小的容器內，就顯得不模糊了
var timestamp = Date.parse(new Date());
//把截取到的圖片替換到a標籤的路徑下載
$("#down1").attr('href',canvas.toDataURL("image/png"));
console.log(canvas.toDataURL("image/png"));
//下載下來的圖片名字
$("#down1").attr('download',timestamp + '.png') ;
$("#down1")[0].click();
//document.body.appendChild(canvas);
});
});
