html2canvas截图

时间仓促，长话短说。

用法

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

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

代码：

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

dataURL就是截图的图地址。

常见问题

1. 截图不全

• 在点击保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图；解决方案：(加上一个延时操作)
• 由于html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)；解决方案：(在生成截图前，先把滚动条置顶)

2. 截图失败
   报错：

Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

• 用了渐变色背景；解决方法：用图片代替。

3. 图片跨域问题

• 把图片放到本地引入。对于不复杂的部分可以用css代替图片来实现。