时间仓促,长话短说。
用法
页面上需要具备的元素有两个:
- 要截图的区域
- 截完图后放图的元素
代码:
<div class="container" id="faultTree" ref="faultTree"></div>
<img :src="dataURL" alt="" />
dataURL就是截图的图地址。
常见问题
- 截图不全
- 在点击保存图片时,此时要保存的资源较多,造成模块并没有完全加载完毕,就已经生成了截图;解决方案:(加上一个延时操作)
- 由于html2canvas是根据body进行截图,若内容高度高于body时,就会出现这样的问题(大概意思就是有滚动条时造成的);解决方案:(在生成截图前,先把滚动条置顶)
- 截图失败
报错:
Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
- 用了渐变色背景;解决方法:用图片代替。
- 图片跨域问题
- 把图片放到本地引入。对于不复杂的部分可以用css代替图片来实现。