如何做一个根据页面实际大小的截图服务（截长图）

背景

作为一家互联网广告公司，我们每天都需要对海量的落地页进行人工审核和机器审核。而审核的方式都是依赖于截图服务将线上在投的落地页生成页面快照，在审核。
目前公司在用的截图服务是好几年前采买的第三方服务，时常会截不到图，或者截不了完整的页面。因此决定自研截图服务，一是稳定性有保障，二是可以定制一些个性化的需求。

第一次尝试

首先想到的方法就是，使用selenium使用手机模式打开浏览器，访问落地页链接，再调用save_screenshot()方法将屏幕快照保存下来。核心代码大概就是这样的：

运行结果如下：

可以看到，这种方式只能截取到当前屏幕大小的页面，如果是长页面，则无法截取。
这里解释一下为什么不使用appium或者adb在真机上截图，因为真机上干扰因素太多了，而且不稳定。

第二次尝试

分析一下上面这种方法截不到长页面的原因，是因为我是用浏览器的手机模式打开了页面，当手机型号确定后，屏幕尺寸也就确定了。如果页面尺寸超过屏幕尺寸，则无法获得完整的图片。那我们可以不使用手机模式，直接使用浏览器模式，打开页面后使用以下两个js
document.documentElement.scrollHeight 获取页面的高度
document.documentElement.scrollWidth 获取页面的宽度
再根据页面真实宽高设置浏览器尺寸，核心代码如下：

效果如下：

找一张长图出来看看效果：

可以看到，这种长页面也都很好的被截取到了，看似没什么问题。但是仔细看了所有的截图，发现有些落地页会判断当前的环境，只有手机环境才能够现实正确的落地页，如果是pc端环境，则显示其他页面。如下面这种，pc端的话则显示天猫主页：

这肯定是不合理的，我们肯定是要得到真实落地页的截图，那就只能继续使用手机模式。

第三次尝试

看来只能继续从手机模式这个方向思考了，既然我们能够通过js获取到页面的尺寸，那是不是可以初始化手机模式的时候自定义设备的尺寸呢。代码如下：

效果如下：

再来看看刚刚那个天猫首页的落地页，这回已经正确显示为落地页内容了：

这回好像是真的大功告成了，最后仔细核对一下所有的截图，看看有没有异常的。果然，还是在127个页面里面发现了一个不寻常的页面：

很明显，这个图片没有截完整。原因是因为
document.documentElement.scrollHeight 获取到的页面高度是640

而这个页面有一个div块的高度是1395.3

也就是说，按照640来设置屏幕尺寸的话，这个页面就展示不完全。

最终尝试

既然知道原因了，那就很简单。还是使用js获取宽高，再通过xpath获取所有的div元素，找到最大尺寸，当作设备的屏幕尺寸。核心代码如下：

效果如下：

重点看一下刚刚有问题的那个页面，这次终于能够将它完整的截取下来了：

至此，方案已经确定了。之后就是将功能封装成api，供上层应用调用。