Vision - 图像对比

2,143 阅读4分钟

Vision是基于图像处理的算法,从工程实践和实际需求发展而来。Vision可以进行图像对比、活动弹窗处理和场景问题的智能处理,本文主要介绍在图像对比场景的应用。

图像空间融合

移动应用的页面内容在空间上是连续的,我们通过在机器屏幕上“滑动”的操作查看内容的不同部分,但是机器的截图是当前屏幕的展示内容。为了能获得页面整体内容展示,我们通过“截图-滑动-截图”的反复操作保存页面的一系列时序相关的截图,然后使用空间融合算法形成一张完整的图像。算法的基本操作步骤:

1. 配置两个参数,剪切参数a和ROI参数b

2. 按页面截图的保存顺序使用参数a剪切第一张图像,保留上半部分

3. 从保留的部分底部开始,用参数b获得ROI区域的图像

4. 用ROI区域的图像做模板,使用模板匹配算法获得第二张图像的拼接点

5. 用第一张图像的保留部分和第二张图像的拼接点做融合,形成新的图像作为下一次计算的第一张图

6. 循环操作获得完整的空间融合后的图像

在实际的应用中,页面可能会有悬浮窗、吸顶的组件影响,我们调试了多组不同的参数来自动适应业务场景的问题。

                                                                图像融合过程

图像对比

获得App页面的内容整体展示图像,我们可以使用配置好的基准图和当前的图像做对比。常见的图像对比算法为像素Pixel-by-Pixel的对比。基于像素的对比适用于两个参与对比的图像来自同一源,可以标记像素级的差异。然而在移动端的场景中,参与对比计算的图像在时间上来自不同的源,手机GPU渲染和页面排版存在像素位置的波动。我们发现,融合后的两个图像常会存在内容位置的差异,例如在连续相同的内容之间增加新的内容。在业务上这种情况体现在需求的更新或者增加相关的展示区域等情形下。内容位置的更新会使像素对比算法失效,对比图的信息不能参考。(可以看到下图中,如果采取传统像素对比算法,即使两幅图中仅有头部区域多出了城市信息,整版版面都将被标记为不同,无从聚焦在真实的不一致上)

                                                 像素对比内容位置的问题

我们需要算法能够标记差异的同时对内容的位置更新做出响应,所以我们开发了一种新的图像增量对比算法来应用到移动端的业务场景。其设计点有:

1. 通过行Hash编码状态来表示图像

2. 图像的对比过程转换为图像1到图像2的转换过程

3. 中间结果后加上滤波器处理行数波动

图像的表示状态定义了它如何去计算,Pixel-by-Pixel的问题在于它对图像的表示基于像素点,内容位置信息互相没有关联,为了让机器理解图像前后内容位置的更新,我们重新定义了图像的表示方式。首先对图像进行以行为单位的特征提取,参考均值Hash表示成二值的形式,这里是为了之后计算去掉单个像素的位置信息,算法可以在更“高层语义”的层面去对比两张图像。在两个图像的行特征关联计算的时候,二维的信息变成了一维,可以使用一维的数据算法做计算。在由行特征关联计算形成的编码状态表里寻找一条从左上角到右下角的最优路径,是图像1到图像2的转换过程,路径中的Op就是两个图像的增量部分。最优的路径是指,图像1转换到图像2的转换路径需要的最少操作。

                                                            行编码和状态转换

实现后的对比算法可以更好的处理内容的位置分布,标记图中增量的部分,不影响相同的内容部分。


                                              Vision对比算法效果

相关链接

基于图像行特征的图像对比算法:Vision-diff