技術標籤：web前端canvasjscsshtml

解決html2canvas儲存為圖片時，出現滾動條只儲存可視區的問題

• • 解決思路

$("#download").click(function () {
    //當出現滾動條時，獲取內容高度，給dom賦值，解決截圖只截可視區的問題
    var maxHeightBox=$(".mainBoxTc").prop('scrollHeight');
    var maxHeightCon=$(".mainCon").prop('scrollHeight');
    $(".mainBoxTc").css("maxHeight",maxHeightCon);
    $(".mainCon").css("maxHeight",maxHeightCon);
    html2canvas($("#mapPop")[0]).then(function (canvas) {
        var imgUri = canvas.toDataURL();
        var saveLink = document.createElement('a');
        saveLink.href = imgUri;
        saveLink.download = 'download.png';
        saveLink.click();
        //恢復原樣式
        $(".mainBoxTc").css("maxHeight",530);
        $(".mainCon").css("maxHeight",650);
    });
});
 

解決思路

html2canvas之所以儲存圖片不完整，是因為出現了滾動條，html2canvas只儲存可視區內容，那就讓所有內容都出現在可視區：

1. 獲取dom所有高度；
2. 給dom重新設定最新高度；
3. 儲存dom可視區檢視；
4. 把dom恢復原來樣式；