html2canvas 空白

2020-05-19  本文已影响0人  Astep

截取空白原因

百度、谷歌了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");
      });

上一篇下一篇

猜你喜欢

热点阅读