美文网首页
html2canvas 生成图片 生成一半有图一半空白 是什么原

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

作者: world_7735 | 来源:发表于2020-12-08 17:33 被阅读0次

    一、首先 你需要查看 你需要生成图片的 大块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();
                    });
                }
            }
    

    相关文章

      网友评论

          本文标题:html2canvas 生成图片 生成一半有图一半空白 是什么原

          本文链接:https://www.haomeiwen.com/subject/gmrqgktx.html