基于视觉分析的屏幕页面结构解析与路径存储方法及系统

技术领域

本发明涉及计算机技术领域，具体涉及基于视觉分析的屏幕页面结构解析与路径存储方法及系统。

背景技术

目前，随着互联网的高速发展，各种互联网页面已经成为这个世界上最大的信息来源。互联网页面作为海量信息的载体已成为人们重要的工作、学习、生活、娱乐工具。页面信息的相关发展给人类生活带来了巨大的方便，人们可以跨越时间和空间界限来共享大量信息。但是如何去获取这些页面信息则是大家面临的共同问题。在最基本的层次上，整个互联网的界面就是由无数的页面而构成，因此如果获取了这些页面结构信息就相当于获取了信息的基本结构。

但是把整个页面作为一个基本的信息获取单位并不是太合理，尽管用户通常会把一些相关的内容放在同一页面中，但是大多数情况下，一个页面中通常会包含不止一类的主题，比如在页面中，可能包含体育类信息，可能包含健康类信息，也可能包含广告，导航链接等信息。这些信息分布在整个页面的不同位置。网页页面结构可以通过HTML（超文本标记语言，HyperText Markup Language）定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS层叠样式表，Cascading StyleSheets），或功能与行为（如 JavaScript）。HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。

然而，大量的页面是非网页页面。大量的客户端软件的屏幕页面也无法获取到底层的布局结构，因此，基于视觉的屏幕页面结构解析是必要的。如果要更准确的获取页面信息，必须能够基于视觉感知对屏幕页面进行结构解析，并存储相应的页面结构。

现有的屏幕页面结构解析及其路径存储相关技术存在以下缺点：

1.基于模板工作量较大、维护成本高

基于模板，一般由人工维护一个URL 和HTML 的模板。当URL 匹配到某个URL模板时，利用对应的HTML的模板来抽取其中的信息。这种方法见效快、准确度高，抓取少量网站可以使用，可以做一些模板设置工具来减少工作量，大量网站需要较多人力维护模板列表。

2.页面信息无法覆盖全面、无法获取每个块的具体坐标

页面分割处理较复杂，需要用到CSS、Javascript等引擎，需要用浏览器内核库来处理HTML，性能可能不高。另外，这个算法的结果只是告诉大家网页大概可以分为多少块，每一块的位置、大小是什么，而哪块是正文还需要进一步计算。

申请号为CN202010456536.X的中国专利文献描述的一种基于深度学习的页面结构识别抽取方法，需要通过大量的数据进行训练，对页面结构进行识别，无法准确定位出页面结构的位置信息。该方法是基于页面的结构化特征数据+自然语言处理的方式进行的页面编码进行的分类、识别和抽取，而非基于视觉分析的方式，因此在无法获取页面编码信息的情况下会失效。

3.支持应用有限、泛化性不强

申请号为CN201710374988.1的中国专利文献描述的页面结构生成方法、页面截图上报方法、装置及系统针对的应用有限，无法适配网页以及等更为复杂的场景。该方法主要用于页面结构的生成以及建立页面路径与页面截图的对应关系，并未涉及到各类软件、网页的页面内部的结构分布和路径存储。

其他的相关技术还利用背景颜色、字体颜色大小等来定义页面语义分块，但难以处理背景渐变、页面样式复杂的情况，另外，划分出来的页面语义块与存储结构的树结点没有绝对的对应关系。

因此，设计一种能够高效、准确、鲁棒的进行页面结构解析和结构路径存储的基于视觉分析的屏幕页面结构解析与路径存储方法及系统，就显得十分重要。

发明内容

本发明是为了克服现有技术中，现有的屏幕页面结构解析及其路径存储相关技术，存在工作量较大、维护成本高，信息覆盖不全面以及支持应用有限的问题，提供了一种能够高效、准确、鲁棒的进行页面结构解析和结构路径存储的基于视觉分析的屏幕页面结构解析与路径存储方法及系统。

为了达到上述发明目的，本发明采用以下技术方案：

基于视觉分析的屏幕页面结构解析与路径存储方法，包括如下步骤；

S1，对图像进行灰度化，根据灰度变化的剧烈程度，将边缘划分为阶跃边缘和屋顶边缘；

S2，对阶跃边缘和屋顶边缘分别求取一阶、二阶导数，获得页面块的边缘和角点的特征信息；

S3，对步骤S2中获得的页面块的边缘和角点的特征信息进行膨胀处理，得到处理后的页面块信息；

S4，对处理后的页面块信息做连通域处理，获取每个页面块的具体位置并还原每个页面块的真实信息；

S5，按照从左到右，从上到下对所有页面块进行排序；

S6，对排序完的所有页面块两两计算交并比，完成页面块的关系判断；

S7，采用树形结构对所有页面块进行存储。

作为优选，步骤S1中所述边缘为图像中在灰度级为8级的情况下，连续三个像素点灰度一阶导数为大于1的区域；所述阶跃边缘两边的灰度值从连续的0级直接跨越到连续的7级；所述屋顶边缘位于灰度值增加与减少的交界处。

作为优选，步骤S2包括如下步骤：

S21，设计卷积核如下所示：

；

其中，

S22，对于一幅图像

其中，

得到的页面块的线为连续两次对横向做偏导以及连续两次对竖向做偏导并叠加；得到的页面块角点信息为先对横向做偏导后对竖向做偏导以及先对竖向做偏导后做横向偏导，并进行叠加；

S23，对步骤S22得到的边和角信息，进行过滤，并对过滤后的边和角信息进行或运算，最终得到页面块的边缘和角点的特征信息。

作为优选，步骤S4中，所述连通域采用的卷积核与步骤S21中采用的卷积核相同。

作为优选，步骤S6中交并比的计算方式如下：

其中，IOU代表两个页面块的交并比，A为页面块1，B为页面块2；分子为页面块1与页面块2面积的交集，分母为页面块1与页面块2面积的并集。

作为优选，步骤S6中还设计了“非对称式”的IOU计算方法，用于判断页面块内的布局，具体计算方式如下：

其中，分子为页面块1与页面块2面积的交集；分母为两个页面块中较小的面积。

作为优选，步骤S7包括如下步骤：

S71，将整个页面的最外层作为第一层，再将不同页面块两两之间IOU为0的页面块，按照从左到右，从上到下排序，并设定页面块1、页面块2、页面块3为第二层，第二层代表了当前页面第一级目录；

S72，确定一级目录后，按照根节点的“非对称式”IOU判断方法，当页面块中元素仅于父节点IOU为1，其余节点IOU均为0时，则认为相应的页面块是一个块元素；当一个页面块除父节点外，还有节点IOU为1的其他页面块时，则认为相应的页面块是一个子块。

本发明还提供了基于视觉分析的屏幕页面结构解析与路径存储系统，包括；

图像灰度模块，用于对图像进行灰度化，根据灰度变化的剧烈程度，将边缘划分为阶跃边缘和屋顶边缘；

图像二阶微分模块，用于对阶跃边缘和屋顶边缘分别求取一阶、二阶导数，获得页面块的边缘和角点的特征信息；

图像形态学操作模块，用于对获得的页面块的边缘和角点的特征信息进行膨胀处理，得到处理后的页面块信息；

连通域处理模块，用于对处理后的页面块信息做连通域处理，获取每个页面块的具体位置并还原每个页面块的真实信息；

页面块排序模块，用于按照从左到右，从上到下对所有页面块进行排序；

页面块关系判断模块，用于对排序完的所有页面块两两计算交并比，完成页面块的关系判断；

页面块存储模块，用于采用树形结构对所有页面块进行存储。

本发明与现有技术相比，有益效果是：（1）本发明将图像微分作为提取页面块的边角信息，所设计的卷积核可以有效提取细小部分的边缘，本发明方法不仅仅适用于网页，对于不同软件的不同页面也同时适用，真正做到了视觉层面上的页面结构解析；（2）本发明所设计的图像形态学操作以及连通域等设计，不仅仅将冗余信息去除，还准确定位到每个块的位置；（3）本发明所设计的页面存储结构以及“非对称式”交并比计算方式，一方面可以获取到页面块与页面之间的联接关系，以便更加方便快捷的获取整个页面的结构信息，同时支持快速索引块元素；（4）通过本发明技术方案，可以实现页面截图场景下，页面结构的高效、准确、鲁棒的解析及其结构灵活、索引方便的存储。

附图说明

图1为本发明中基于视觉分析的屏幕页面结构解析与路径存储方法的一种流程图；

图2为本发明中存储结构的一种示意图；

图3为本发明实施例所提供的基于视觉分析的屏幕页面结构解析与路径存储方法在RPA拾取元素和执行应用中的一种示意图；

图4为对拾取界面进行二阶微分后的一种轮廓信息示意图；

图5为图4进行形态学操作和连通域操作后的一种页面块信息示意图。

具体实施方式

为了更清楚地说明本发明实施例，下面将对照附图说明本发明的具体实施方式。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，并获得其他的实施方式。

如图1所示，本发明提供了基于视觉分析的屏幕页面结构解析与路径存储方法，包括如下步骤；

S1，对图像进行灰度化，根据灰度变化的剧烈程度，将边缘划分为阶跃边缘和屋顶边缘；

S2，对阶跃边缘和屋顶边缘分别求取一阶、二阶导数，获得页面块的边缘和角点的特征信息；

S3，对步骤S2中获得的页面块的边缘和角点的特征信息进行膨胀处理，得到处理后的页面块信息；

S4，对处理后的页面块信息做连通域处理，获取每个页面块的具体位置并还原每个页面块的真实信息；

S5，按照从左到右，从上到下对所有页面块进行排序；

S6，对排序完的所有页面块两两计算交并比，完成页面块的关系判断；

S7，采用树形结构对所有页面块进行存储。

对于步骤S1，目前处理图像的数据值是有限的，因此最大可能的灰度变化也是有限的，变化发生的最短距离是相邻像素间的距离。图像的大部分信息都存在于图像的边缘中，页面块的周围也都存在边缘，边缘主要表现为图像局部特征的不连续性，即图像中灰度变化比较剧烈的地方。因此，本发明把边缘定义为图像中灰度发生急剧变化的区域边界，例如可以设定边缘为图像中在灰度级为8级的情况下，连续三个像素点灰度一阶导数为大于1的区域。根据灰度变化的剧烈程度，通常边缘划分为阶跃状和屋顶状两种类型。阶跃边缘两边的灰度值变化明显，如从连续的0级直接跨越到连续的7级，而屋顶边缘位于灰度值增加与减少的交界处。

对于步骤S2，对阶跃边缘和屋顶边缘分别求取一阶、二阶导数就可以表示边缘点的变化。因此，对于一个阶跃边缘点，其灰度变化曲线的一阶导数在该点达到极大值，二阶导数在该点与零交叉；对于一个屋顶边缘点，其灰度变化曲线的一阶导数在该点与零交叉，二阶导数在该点达到极大值。本发明设计的二阶微分会突出屏幕页面图像中的急剧灰度过渡，并且不强调缓慢变化的灰度区域（部分软件页面是渐变色的背景，若强调缓慢变化的灰度区域会对边缘造成干扰）。由于页面块是一个类似矩形形状，主要有横向竖向的边包围而成。因此，设计卷积核如下所示：

；

其中，

对于一幅图像

其中，

得到的页面块的线为连续两次对横向做偏导以及连续两次对竖向做偏导并叠加；得到的页面块角点信息为先对横向做偏导后对竖向做偏导以及先对竖向做偏导后做横向偏导，并进行叠加；

对得到的边和角信息，进行过滤，确保这些信息是可靠的，并对过滤后的边和角信息进行或运算，最终得到页面块的边缘和角点的特征信息。

在步骤S3中，对于上一步得到的页面块信息，还是会存在不连续的现象，因此对得到的边角信息进行膨胀处理，因此可以得到可靠的页面块信息，但同时一些细小的冗余信息，比如文字，部分图案也同时存在于目前得到的结果中。

对于步骤S4，为定位页面块的具体位置以及最大程度还原页面块的真实信息，对得到的处理图像做连通域处理，连通域所用核卷积与图像二阶微分采用核卷积相同。因此，可以得到每个页面块的基本信息，页面块大小，并通过页面块的面积大小判断，过滤一些细小的块元素。

进一步的，在步骤S6中，交并比的计算方式如下：

其中，IOU代表两个页面块的交并比，A为页面块1，B为页面块2；分子为页面块1与页面块2面积的交集，分母为页面块1与页面块2面积的并集。

为了更好的判断页面块内的布局，在步骤S6中还设计了“非对称式”的IOU计算方法，此计算方式更好的表达了页面块的关系，具体计算方式如下：

其中，分子为页面块1与页面块2面积的交集；分母为两个页面块中较小的面积。

进一步的，对于步骤S7，如图2所示，整个页面的最外层作为第一层，再将不同页面块两两之间IOU为0的页面块，按照从左到右，从上到下排序，页面块1、页面块2、页面块3为第二层，第二层代表了当前页面第一级目录。确定一级目录后，同样地，按照根节点的“非对称式”IOU判断方法，当页面块中元素仅于父节点IOU为1，其余为0时，则认为是一个块元素；当一个页面块除父节点外，还有IOU为1的其他块时，则认为是一个子块。

综上，得到一个基于视觉分析的页面结构解析和存储方案。

如图1所示，本发明还提供了基于视觉分析的屏幕页面结构解析与路径存储系统，主要分为两个大模块：视觉信息处理模块和路径存储模块。其中，视觉信息处理模块主要包含图像灰度、图像二阶微分、图像形态学操作、连通域操作。存储模块主要包含：页面块排序、页面关系判断、存储结构。

视觉信息处理模块，用于提取页面块，得到屏幕页面中的所有页面块，具体包括；

图像灰度模块，用于对图像进行灰度化，根据灰度变化的剧烈程度，将边缘划分为阶跃边缘和屋顶边缘；

图像二阶微分模块，用于对阶跃边缘和屋顶边缘分别求取一阶、二阶导数，获得页面块的边缘和角点的特征信息；

图像形态学操作模块，用于对获得的页面块的边缘和角点的特征信息进行膨胀处理，得到处理后的页面块信息；

连通域处理模块，用于对处理后的页面块信息做连通域处理，获取每个页面块的具体位置并还原每个页面块的真实信息。

路径存储模块具体包括：

页面块排序模块，用于按照从左到右，从上到下对所有页面块进行排序；

页面块关系判断模块，用于对排序完的所有页面块两两计算交并比，完成页面块的关系判断；

页面块存储模块，用于采用树形结构对所有页面块进行存储。

如图3所示，为本发明在RPA拾取元素和执行的应用示例，该示例仅作为整个发明方案在其中一个具体场景上的应用示例：

1.RPA拾取元素得到当前的拾取界面和相应的元素坐标；

2.若为拾取阶段将拾取界面进行页面结构解析得到页面块；

A.以微信聊天界面为例，拾取界面图像并进行灰度操作；

B.灰度图进行二阶微分得到轮廓信息，得到如图4所示结果；

C.将上一步结果进行形态学操作；

D.将上一步结果进行连通域操作得到页面块信息，得到如图5所示结果，图5中，合计八个框，坐标分别为[0, 0, 55, 548]，[62, 0, 233, 121]，[62, 128, 233, 57]，[62,191, 233, 361]，[125, 33, 127, 18]，[302, 0, 497, 59]，[302, 66, 497, 329]，[302,402, 497, 150]。

3.将元素坐标送入页面块信息和存储结构模块，得到元素的存储路径。

A.页面块两两之间计算交并比；

B.根据交并比得到页面块之间的关系；

C.根据页面块关系写入存储结构

以图5为例，存储结构存储为：{0:[1,2,3,4,6,7,8], 2:[5]}。

4.当执行时，可快速索引元素的页面结构路径。

以块5为例子，当执行时，相同的页面结构在不同分辨率其坐标位置已经发生变化，但是其页面布局位置不变。

A.输入元素的路径信息；

B.根据路径得到此元素在新页面中具体的页面块；

C.根据得到页面块，可快速索引至相应的元素并与原有界面相应元素快速比较。

本发明将视觉方案应用到页面结构解析当中，解决了传统视觉方案无法定位页面块以及适用性比较差的问题。本发明的创新点如下：

1.本发明在页面结构解析过程中，创新性地设计边角信息提取方法，可稳定可靠的提取页面块的边缘信息，突出了页面块边角信息，弱化了其他噪声的影响。

2.本发明在提取边角信息后，创新性地设计了增强边角信息的视觉处理技术，去除如水印等干扰的影响，能稳定增强边角信息的特征并准确获取到页面块的位置、大小。

3.本发明针对页面结构解析的页面块结果，提出了存储页面块信息的分层树型存储结构方法，结合设计的“非对称式”交并比页面块判断方式，可准确表示页面结构信息，此存储方法适用于多分辨率场景，效果稳定。

以上所述仅是对本发明的优选实施例及原理进行了详细说明，对本领域的普通技术人员而言，依据本发明提供的思想，在具体实施方式上会有改变之处，而这些改变也应视为本发明的保护范围。