html2canvas截图

时间仓促,长话短说。

用法

页面上需要具备的元素有两个:

  1. 要截图的区域
  2. 截完图后放图的元素

代码:

<div class="container" id="faultTree" ref="faultTree"></div>
<img :src="dataURL" alt="" />

dataURL就是截图的图地址。

常见问题

  1. 截图不全
  • 在点击保存图片时,此时要保存的资源较多,造成模块并没有完全加载完毕,就已经生成了截图;解决方案:(加上一个延时操作)
  • 由于html2canvas是根据body进行截图,若内容高度高于body时,就会出现这样的问题(大概意思就是有滚动条时造成的);解决方案:(在生成截图前,先把滚动条置顶)
  1. 截图失败
    报错:
Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
  • 用了渐变色背景;解决方法:用图片代替。
  1. 图片跨域问题
  • 把图片放到本地引入。对于不复杂的部分可以用css代替图片来实现。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容