html2canvas 截取滾動條隱藏部分內容顯示空白的解決方法

今天用html2canvas 截取頁面中指定的標簽內容為圖片時，遇到了截圖到的圖片為空白圖片的問題，網上找了很久，大多數都是添加下面紅色部分代碼：

html2canvas(_clone, {    
     allowTaint: true,  
     taintTest: true,    
 width: window.screen.availWidth, height: window.screen.availHeight, windowWidth: document.body.scrollWidth, windowHeight: document.body.scrollHeight, x:0, y:window.pageYOffset,
     onrendered: function(canvas) {    
         //生成base64圖片數據    
         var dataUrl = canvas.toDataURL();
         progressBase64[progress] = dataUrl;
     }  
});  

這種方式只能解：決截取整個html頁面時，滾動條隱藏部分截取不到的問題，但是我們只需要截取滾動條隱藏部分中的某個div標簽，所以和本次需求不符。

之后看到一片文章，說是用快照的方式，參考地址：https://www.douban.com/note/561316552/

試了一下，果然這種方式可行，原文章沒有具體實現，現在我把實現代碼放在這里，供大家參考：

// 復制需要截圖的div標簽
var ele = $("#item");
var _clone = ele.clone();
// 把復制出來的標簽臨時添加到body上
$("body").append(_clone);
//html標簽生成圖片base64流
html2canvas(_clone, {    
    allowTaint: true,  
    taintTest: true,    
    onrendered: function(canvas) {    
        //生成base64圖片數據    
        var dataUrl = canvas.toDataURL();
        //移除臨時添加的標簽                        
        _clone.remove();
    }  
});  

根據上面的方法就可以截取到滾動條未顯示部分的標簽偽圖片了。