html2canvas生成图片底部出现白边儿的解决方法

场景

最近使用html2canvas的时候，在长屏幕尺寸下，生成的图片底部会有白边。

生成的图片的步骤：

1、目标dom使用绝对定位移出到屏幕不可见范围绘制。

2、把body的滚动条移动到顶端。

3、延迟500ms后使用html2canvas进行绘制。

 

过程

看了这篇文章https://www.jianshu.com/p/1ba91e9bb2ca里讲的，不是很明白，照着写也没能解决问题。

 

解决方案

最后使用了html2canvas自带的backgroundColor属性，把整个画布设置为目标dom的背景色，这样白边就没有了。

但是这个方案有一个问题，就是如果目标dom底部是一个图片，设置背景色就不行了。

 

我们目标是去掉白边，那么可以把html2canvas的height属性减1，让白边不出现在生成的图片里，就彻底解决这个问题了。