美文网首页
html2canvas 空白

html2canvas 空白

作者: Astep | 来源:发表于2020-05-19 15:43 被阅读0次

    截取空白原因

    百度、谷歌了n久,基本啥方法都试了一遍,还是一直截取空白

    主要固原是因为页面有滚动条,然后把滚动条去掉就没有问题。

    文档使用方法

        html2canvas(document.getElementById("drag_box")).then(canvas=> {
            document.body.appendChild(canvas);
            this.url = canvas.toDataURL("image/png");
        });
    

    按照这个方式使用,页面没有滚动条还行,有滚动条时出现大片空白。

    解决方案

           // 获取元素
          let dome = document.getElementById("drag_box");
          // 生成的时候一定要转入  x 跟  y  轴,如果不传还是会空白
          html2canvas(dome, {
            x: dome.offsetLeft, 
            y: dome.offsetTop
          }).then(canvas => {
            document.body.appendChild(canvas);
            this.url = canvas.toDataURL("image/png");
          });
    
    

    相关文章

      网友评论

          本文标题:html2canvas 空白

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