html2canvas 生成图片 生成一半有图一半空白 是什么原

一、首先 你需要查看 你需要生成图片的 大块dom结构 是否渲染完成

1.如果还未渲染完成 那你生成的图片 肯定是空白

解决办法：你可以写一个 延迟器
setTimeout(function() {
     /* html2canvas 1.0.5 版本 */
     html2canvas(document.querySelector("#captureimg"), ).then(canvas => {
          console.log(canvas)
     });
}, 500);

2.如果页面渲染完成 截图 还是空白，就要检查你的页面是否是一屏多的内容 ，那么说明是和页面的滚动条的高度有关，高度不为0的情况下 ，生成图片就是有空白

解决办法：在生成图片之前 让滚动条高度为0就好
window.pageYOffset = 0;
document.documentElement.scrollTop = 0；
document.body.scrollTop = 0；
setTimeout(function() {
     /* html2canvas 1.0.5 版本 */
     html2canvas(document.querySelector("#captureimg"), ).then(canvas => {
          console.log(canvas)
     });
}, 500);

注意：切忌页面高度在一屏以外，再生成图片的时候，不要随便滚动页面，不然生成的图片有空白 ，是因为页面高度、滚动条高度 、页面顶部距离不为0了

注意：如果多个图片同时上传使用递归，一个图片执行完后，再调用下一个图片
    function canvasnext() {
            if (tempfiles.length >= $(".sjr_big_a").length) {

                uploaders[0].bind('UploadComplete', function (up, files) {
                    uploaders[0].unbind("UploadComplete");
                    console.log(3)
                    submitlist();
                });
                uploaders[0].addFile(tempfiles);
                uploaders[0].start();
            }
            else {
                html2canvas($(".sjr_big_a")[tempfiles.length], { backgroundColor: "transparent" }).then(function (canvas) {
                    var getImg = canvas.toDataURL("image/png");
                    var tempid = $(".sjr_a_textarea").eq(tempfiles.length).attr("id");

                    console.log(tempid);
                    console.log(getImg);
                    var file = b64toBlobtoFile(tempid + ".png", getImg);

                    tempfiles.push(file);
                    canvasnext();
                });
            }
        }