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();
    }  
});  

根据上面的方法就可以截取到滚动条未显示部分的标签伪图片了。