场景
最近使用html2canvas的时候,在长屏幕尺寸下,生成的图片底部会有白边。
生成的图片的步骤:
1、目标dom使用绝对定位移出到屏幕不可见范围绘制。
2、把body的滚动条移动到顶端。
3、延迟500ms后使用html2canvas进行绘制。
过程
看了这篇文章https://www.jianshu.com/p/1ba91e9bb2ca里讲的,不是很明白,照着写也没能解决问题。
解决方案
最后使用了html2canvas自带的backgroundColor属性,把整个画布设置为目标dom的背景色,这样白边就没有了。
但是这个方案有一个问题,就是如果目标dom底部是一个图片,设置背景色就不行了。
我们目标是去掉白边,那么可以把html2canvas的height属性减1,让白边不出现在生成的图片里,就彻底解决这个问题了。