CN109035256A - 用户界面图像切割方法、装置、服务器和存储介质 - Google Patents

Abstract

本发明实施例公开了一种用户界面图像切割方法、装置、服务器和存储介质。该方法包括：检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。本发明实施例通过自动地对用户界面进行图像分割以及各切割区域的语义识别，避免了测试人员的人工判断过程，降低了应用前端页面测试的人工成本，从而提高了用户界面布局的识别效率，为后续发现并修复兼容性页面问题的快速展开提供了依据。

Description

用户界面图像切割方法、装置、服务器和存储介质

技术领域

本发明实施例涉及计算机应用技术领域，尤其涉及一种用户界面图像切割方法、装置、服务器和存储介质。

背景技术

互联网网页不仅包含了人们多需要的各种信息，同时还是互联网的用户接口(User Interface，UI)。网页的视觉感知影响着网页的用户体验，诸如页面布局错乱、页面内容重复等UI典型问题严重影响用户体验。

现有技术通过前端测试人员对用户界面进行人工检查和判断，识别页面布局及其附属内容，并将发现的前端页面问题进行记录，从而便于维护人员针对记录中的页面问题查找到页面对应的位置，并进行页面的修改和维护。

然而，现有技术中用户界面的布局完全依赖于前端测试人员的人工观察和判断，人力成本存在不可替代性。进而降低了页面布局的识别效率以及后续页面问题的的发现和维护效率，从而影响用户对于页面的访问体验。

发明内容

本发明实施例提供了一种用户界面图像切割方法、装置、服务器和存储介质，能够自动识别用户界面布局。

第一方面，本发明实施例提供了一种用户界面图像切割方法，包括：

检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；

对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

第二方面，本发明实施例提供了一种用户界面图像切割装置，包括：

图像切割模块，用于检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；

语义识别模块，用于对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

第三方面，本发明实施例提供了一种服务器，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明任意实施例所述的用户界面图像切割方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明任意实施例所述的用户界面图像切割方法。

本发明实施例通过将用户界面视为一副完整的图像，通过图像处理技术对用户界面图像进行图像切割，并对各切割区域进行语义识别，确定各切割区域的属性信息。本发明实施例通过自动地对用户界面进行图像分割以及各切割区域的语义识别，避免了测试人员的人工判断过程，降低了应用前端页面测试的人工成本，从而提高了用户界面布局的识别效率，为后续发现并修复兼容性页面问题的快速展开提供了依据。

附图说明

图1为本发明实施例一提供的一种用户界面图像切割方法的流程图；

图2为本发明实施例二提供的细粒度切割用户界面图像的流程图；

图3为本发明实施例二提供的首次切割用户界面图像的示例图；

图4为本发明实施例二提供的二次横向切割用户界面图像的示例图；

图5为本发明实施例二提供的不同切割次数的切割效果示例图；

图6为本发明实施例二提供的直线检测示例图；

图7为本发明实施例三提供的识别图片属性区域的流程图；

图8为本发明实施例三提供的识别文字属性区域的流程图；

图9为本发明实施例三提供的识别文字属性区域的流程图；

图10为本发明实施例三提供的识别图标属性区域的流程图；

图11为本发明实施例四提供的聚合文字属性区域的流程图；

图12为本发明实施例五提供的一种用户界面图像切割方法的流程图；

图13为本发明实施例五提供的用户界面切割和语义识别结果的示例图；

图14为本发明实施例六提供的一种用户界面图像切割装置的结构示意图；

图15为本发明实施例七提供的一种服务器的结构示意图。

具体实施方式

下面结合附图和实施例对本发明实施例作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明实施例，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明实施例相关的部分而非全部结构。

实施例一

图1为本发明实施例一提供的一种用户界面图像切割方法的流程图，本实施例可适用于识别用户界面布局的情况，该方法可由一种用户界面图像切割装置来执行。该方法具体包括如下步骤：

S110、检测用户界面图像中包括的切割线，并依据检测到的切割线对用户界面图像进行图像切割。

在本发明具体实施例中，用户界面图像是指将应用程序的任一用户界面视为一副完整的图像，相应的，用户界面图像不具备任何功能，仅是供界面布局分析的图像。

本实施例中，切割线是指对应用程序的用户界面图像进行图像灰度处理后，依据图像灰度化后的像素灰度值矩阵进行扫描而确定的切割线。对像素灰度值矩阵的扫描可以包括横向扫描和纵向扫描，相应的，切割线可以包括横向切割线和纵向切割线，从而将用户界面切割为多个切割区域。本实施例将横向扫描和纵向扫描进行至少两次交替，在上一次图像切割的基础上，对用户界面图像包括的各切割区域分别进行本次扫描和切割，实现像素级别的细粒度的图像切割。进而横向扫描和纵向扫描的图像切割顺序和切割次数决定了图像切割的精度，可以理解的是，交替扫描和切割的次数越多，切割精度越高，用户界面图像被划分得越细致。

具体的，依据用户界面图像的像素灰度值，本实施例首先对图像灰度化后的像素灰度值矩阵进行逐行的横向扫描。若某行的灰度值在容错范围内一致，即该部分的像素灰度值都趋于同一灰度值范围内，则标记为横向切割线，并进行横向区域切割。然后依次再对切割后的各个区域分别进行逐列的纵向扫描，同样判断某列的像素灰度值来确定纵向切割线，并进行纵向区域切割。由于对图像切割区域的高精度要求，上述流程可以进行多次，例如在第一次横向切割和纵向切割确定的切割区域的基础上，在各切割区域内再分别进行至少一次横向扫描和/或纵向扫描，得到各区域包括的横向切割线和/或纵向切割线；依据各区域包括的横向切割线和/或纵向切割线对各区域进行图像切割。

此外，本实施例考虑到用户界面通常为列表式的布局，即每一列表内所展示的内容为相关的内容，且不同内容的列表通常采用直线进行划分，进而本实施例采用直线检测技术检测用户界面中满足特定条件的直线，从而确定相邻两条直线之间的区域即为内容相关的同一列表区域，并对同一列表区域内的各切割区域进行块号标注，便于对同一列表区域内切割区域的识别。

示例性的，由于用户界面中的信息较为丰富，且某些表达同一含义的图标和文字相距相近且灰度特征相似，进而在第一次进行用户界面图像的横向扫描和纵向扫描时，该类图标和文字分别与周围背景信息的差异较小，因此该类图标和文字很可能被切割进同一切割区域中。进而在上一次图像切割的基础上，对用户界面图像中包括的各个上一次切割区域份分别进行再次的横向扫描和/或纵向扫描。由于在首次切割区域中该类图标和文字分别与周围背景信息的差异较为明显，进而通过再次的扫描可以将该类图标和文字切割开来，以此实现像素级别的细粒度图像切割。并采用霍夫曼直线检测算法，检测用户界面图像中直线长度超过用户界面图像宽度50％的直线，依据直线检测结果对各切割区域进行块号标注。例如可以规定相邻两条直线之间区域内的所有切割区域的块号的首字符相同，进而可以根据用户界面图像中各切割区域的块号确定同一列表区域内的切割区域，为后期切割区域的语义聚合提供依据。

S120、对用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

在本发明具体实施例中，以各切割区域的图像特征为基础，通过对切割区域的特征进行分析和识别，从而确定各切割区域属性，达到语义识别的效果。其中切割区域的界面属性至少可以包括图片属性、文字属性和图标属性。

具体的，本实施例可以采用噪声监测技术来确定切割区域的图片属性；可以通过字符识别技术，并辅助字符所占的面积特征和图像特征，来确定切割区域或相邻切割区域的文字属性；还可以采用图像匹配技术确定切割区域的图标属性。对图像的语义识别不局限于上述示例中方法，任何可以对图像进行语义识别的方法都可以应用于本实施例中。

本实施例考虑到用户界面中文字的普遍存在性和分散性，对相邻直线之间区域内的文字属性区域进行聚合处理，通过将位于同一行内的文字属性区域进行聚合，以及将相邻行的文字属性区域进行聚合，从而将相关内容且相距较近文字属性区域聚合为完整的文字属性区域，便于文字属性区域的整合以及相关内容的确定。

此外，对于文字中存在标点符号的现象，由于本实施例以图像特征为基础，而标点符号相对于文字来说所占的标点符号区域较小，在细粒度的图像切割后，标点符号区域容易被切割为单独的区域，影响文字属性区域的分割。因此本实施例对标点符号进行相应的拉伸处理，将标点符号处理为与相邻文字相同大小的标点符号区域，从而可以依据相同的文字属性区域聚合规则对标点符号区域和文字属性区域进行聚合处理，避免文字属性区域的不连续性。

其中，文字属性区域聚合规则可以针对单行文字高度、相邻文字属性区域之间的横向距离、相邻文字属性区域之间的纵向距离以及相邻文字属性区域的块号等相邻文字属性区域的特征中的至少一种来确定。

S130、依据各切割区域的界面属性区别展示不同界面属性的各切割区域。

在本发明具体实施例中，对用户界面图像进行图像切割和语义识别的目的在于前端测试人员可以快速了解界面布局，并发现其中的页面问题。因此本实施例依据各切割区域的界面属性，将不同界面属性的各切割区域区别展示出来。示例性的，可以为各切割区域添加对应的属性标签，或者可以采用不同颜色的边框标示出不同界面属性的各切割区域。

本实施例的技术方案，通过将用户界面视为一副完整的图像，通过图像处理技术对用户界面图像进行图像切割，并对各切割区域进行语义识别，确定各切割区域的属性信息。本发明实施例通过自动地对用户界面进行图像分割以及各切割区域的语义识别，避免了测试人员的人工判断过程，降低了应用前端页面测试的人工成本，从而提高了用户界面布局的识别效率，为后续发现并修复兼容性页面问题的快速展开提供了依据。

实施例二

本实施例在上述实施例一的基础上，提供了用户界面图像切割方法的一个优选实施方式，能够对用户界面图像进行细粒度的图像切割。图2为本发明实施例二提供的细粒度切割用户界面图像的流程图，如图2所示，该方法包括以下具体步骤：

S210、依据用户界面图像的像素灰度值对用户界面图像进行至少一次横向扫描和/或纵向扫描，得到用户界面图像中包括的横向切割线和/或纵向切割线。

在本发明具体实施例中，横向扫描是指对像素灰度值矩阵进行逐行扫描，纵向扫描是指对像素灰度值矩阵进行逐列扫描，获取各像素点的灰度值，若某行或某列的灰度值在容错范围内一致，则标记为对应的横向或纵向切割线，为图像切割提供依据。

S220、依据横向切割线和/或纵向切割线将用户界面图像切割为多个区域。

在本发明具体实施例中，首先对用户界面图像进行灰度化处理，得到用户界面图像对应的像素灰度值矩阵。其次对像素灰度值矩阵进行逐行的横向扫描，若某行的灰度值在容错范围内一致，则标记为横向切割线，并依据横向切割线进行横向区域切割。此时可以默认为用户界面图像的两侧边界为纵向切割线，仅可以得到用户界面图像中被切割为一行一行的横向切割区域。然后对切割后的各个横向切割区域分别进行纵向扫描，若某列的灰度值在容错范围内一致，则标记为纵向切割线，并依据纵向切割线对横向切割区域进行纵向切割。用户界面图像中的横向切割区域被细分为一块一块的矩形切割区域，其中可以仅保留矩形切割区域中包含文字、图片或图标等信息的切割区域，而丢弃无内容的空白切割区域。

示例性的，图3为本发明实施例二提供的首次切割用户界面图像的示例图，图3中左侧图片为横向切割示例图，图3中右侧图片为对横向切割区域进行的纵向切割示例图。假设对百度搜索界面首页进行图像切割处理，首先对灰度化后的像素矩阵进行横向扫描，确定用户界面图像中的横向切割线，并进行横向区域切割。如图3中左侧图片所示，用户界面图像被切割为一行一行的横向切割区域，且此时横向切割区域中的内容较为杂乱，切割精度较低。其次，对已分割的各横向切割区域进行纵向扫描，确定各横向切割区域中的纵向切割线，并进行纵向区域切割。如图3中右侧图片所示，各横向切割区域被细分为一块一块的矩形切割区域，且仅保留了包含文字、图片或图标等信息的矩形切割区域。通过对比横向切割和纵向切割后的示例图可知，纵向切割后的矩形切割区域中的内容得到了进一步的细化切割，其中的各个图标、断句、图片以及甚至是标点符号都被切割出来。

S230、对用户界面图像中包括的各区域进行至少一次横向扫描和/或纵向扫描，得到各区域包括的横向切割线和/或纵向切割线。

在本发明具体实施例中，在第一次进行横向扫描和/或纵向扫描得到的图像切割的基础上，分别对各个上述得到的矩形切割区域进行至少一次横向扫描和/或纵向扫描，确定各区域包括的横向切割线和/或纵向切割线，进行更细粒度的图像切割。

S240、依据各区域包括的横向切割线和/或纵向切割线对各区域进行图像切割。

在本发明具体实施例中，依据对独立的切割区域再次进行扫描，确定各切割区域内的切割线并进行切割，实现在各独立的切割区域内进行更细粒度的高精度图像切割。

示例性的，图4为本发明实施例二提供的二次横向切割用户界面图像的示例图，图4中左侧图片为首次横向及纵向切割示例图，图4中右侧图片为对首次切割区域进行的二次横向切割示例图。通过对比首次图像切割和二次图像切割的结果可知，各切割区域中的内容又得到了进一步的细化切割，其中，同一切割区域内的图标和文字得到分割，对于某些字体中占据字符空间较大的标点符号得到了完全独立分割。

值得注意的是，横向切割和纵向切割的图像切割顺序和切割次数决定了用户界面图像的切割效果和切割精度，可以根据实际的页面排版模式来规定横向切割和纵向切割的交替顺序，也可以根据实际的图像切割精度要求来分别规定横向切割和纵向切割的次数。鉴于大多数页面排版都是依据读写顺序依次横向布局的，因此本实施例优选于先进行横向切割，再进行纵向切割，保证切割后的区域依然符合用户的读写习惯。同时鉴于对用户界面图像切割区域的高精度要求，本实施例优选进行两轮图像切割，即依次进行横向切割、纵向切割、横向切割和纵向切割。

示例性的，以用户界面图像中的局部区域为例，图5为本发明实施例二提供的不同切割次数的切割效果示例图，图5中上侧图片为执行横纵横三次切割效果示例图，图5中下侧图片为执行横纵横纵四次切割效果示例图。通过对比不同切割次数的切割效果图可知，交替进行的切割次数越多，用户界面图像中的各项信息越容易被划分，且完整的将其切割在矩形区域内而不带任何多余信息。例如图5中的图标都得到了进一步切割，去除了其周围的空白区域。

S250、检测用户界面图像中直线长度与用户界面图像宽度的比值在预设比例阈值范围内的直线。

在本发明具体实施例中，考虑到用户界面通常以列表的形式进行展示，即每一列表内所展示的内容为相关的内容，且不同内容的列表通常采用直线进行划分，进而本实施例可以采用直线检测技术检检测用户界面图像中直线长度与用户界面图像宽度的比值在预设比例阈值范围内的直线，从而确定相邻两条直线之间的区域即为内容相关的同一列表区域，便于对同一列表区域内切割区域的识别。其中，预设比例阈值可以根据具体应用的用户界面而定，且本实施例不对直线检测算法进行限定，任何可以实现图像中直线检测的算法都可以应用于本实施例中。

示例性的，图6为本发明实施例二提供的直线检测示例图。假设对百度搜索界面中某一新闻推荐界面进行直线检测，可以采用霍夫曼直线检测算法。假设预设比例阈值为0.5，即检测用户界面图像中直线长度超过用户界面图像宽度50％的直线。如图6所示，被矩形框框住的区域即为检测出的满足条件的直线，直线将各条新闻进行区分，直线的检测利于对同一列表区域内切割区域的识别和聚合。

S260、依据直线检测结果，为各切割区域进行块号标注。

在本发明具体实施例中，可以根据用户界面图像中直线的检测，给用户界面图像中包含的各个切割区域标注块号，以便于根据块号即可识别出位于相邻两条直线之间的同一列表区域内切割区域。示例性的，本实施例可以规定相邻两条直线之间区域内的所有切割区域的块号的首字符相同，进而可以根据用户界面图像中各切割区域的块号确定同一列表区域内的切割区域，为后期切割区域的语义聚合提供依据。

本实施例的技术方案，通过将用户界面视为一副完整的图像，对用户界面进行图像灰度化处理，依据像素灰度值矩阵对用户界面图像进行横向切割和/或纵向切割，并在各切割区域内再次进行横向切割和/或纵向切割；最终对用户界面图像进行直线检测，依据直线检测结果为各切割区域进行块号标注。本发明实施例通过对用户界面图像进行多轮的横向切割和/或纵向切割，自动地对用户界面进行像素级别的图像分割，实现了将用户界面图像中不同属性的区域分割出来，以及将同一列表区域内的切割区域标识出来，避免了测试人员的人工分割和判断的过程，降低了应用前端页面测试的人工成本，提高了对用户界面图像的切割精度，为后续切割区域的语义识别和聚合等工作的快速展开提供了依据。

实施例三

本实施例在上述实施例一的基础上，提供了用户界面图像切割方法的一个优选实施方式，能够对用户界面图像中各切割区域进行语义识别。本实施例通过对切割区域进行语义识别，从而确定各切割区域属性，其中切割区域的属性至少包括图片属性、文字属性和图标属性。

图7为本发明实施例三提供的识别图片属性区域的流程图，如图7所示，该方法包括以下具体步骤：

S710、采用图像识别技术对用户界面图像中包括的各切割区域进行噪声检测。

在本发明具体实施例中，噪声主要是由于传感器在成像的过程中,受到同质异谱、同谱异质等因素的影响而产生的。鉴于图片中包含的颜色丰富，成像较为复杂，其中的噪声通常高于普通文字显示区域。因此本实施例可以采用图像识别技术对用户界面图像中包括的各切割区域进行噪声检测，并统计各切割区域内噪点数量。常见的噪声包括椒盐噪声、高斯噪声、泊松噪声和乘性噪声等类别，本实施例可以根据实际检测的噪声类别来确定采用的噪声检测算法。

S720、若检测到任一切割区域的噪点个数大于噪点数量阈值，则确定该切割区域的界面属性是图片。

在本发明具体实施例中，可以根据实际检测的噪声类别及特点，预先设定与噪声类别匹配的噪点数量阈值。即当检测该类别噪声时，若统计的噪声点数量大于预设的噪点数量阈值，则确定该切割区域的界面属性是图片。可以理解的是，不同类别的噪声对应的噪点数量阈值不同。

示例性的，椒盐噪声是图片中普遍存在的。假设根据大量实验或者人工经验，确定一副正常显示的图片中含有的椒盐噪声点数量通常至少为100个。则预先设定采用检测椒盐噪声的算法时的噪点数量阈值为100，进而在若检测到任一切割区域的椒盐噪点个数大于100时，则确定该切割区域为图片属性区域。

图8为本发明实施例三提供的识别文字属性区域的流程图，如图8所示，该方法包括以下具体步骤：

S810、获取任一切割区域面积以及该切割区域中文字部分所占面积。

在本发明具体实施例中，可以采用文字检测技术对各切割区域进行检测，获取切割区域中所有文字，确定各切割区域内文字部分所占面积以及该切割区域的面积。

S820、若该任一切割区域中的文字部分所占面积占该切割区域面积的比例值大于占比阈值，则确定该切割区域的界面属性是文字。

在本发明具体实施例中，可以根据上述实施例中对用户界面图像的切割精度，依靠实验确定文字属性区域中文字部分面积占据切割区域面积的比例值，从而确定文字部分与文字属性区域的占比阈值。可以理解的是，不同的切割精度所关联的文字占比阈值也是不同，切割精度越高则文字占比阈值越高，反之切割精度越低则文字占比阈值越低。相应的，若切割区域中文字部分所占面积占该切割区域面积的比例值大于占比阈值，则确定该切割区域的界面属性是文字。

示例性的，假设采用横纵横纵四次切割方式对用户界面进行切割，根据大量实验或者人工经验，确定文字属性区域中文字占比通常至少为85％，预先设定与横纵横纵四次切割方式相关联的文字占比阈值为85％。进而可以采用光学字符识别(Optical CharacterRecognition，OCR)技术来检测并获取各切割区域中的所有文字，确定文字部分所占面积。若检测到任一切割区域中的文字部分所占面积占该切割区域面积的比例值大于85％，则确定该切割区域为文字属性区域。

S830、依据相邻文字属性区域的特征对文字属性区域进行聚合处理。

在本发明具体实施例中，相邻文字属性区域的特征包括单行文字高度、相邻文字属性区域之间的横向距离、相邻文字属性区域之间的纵向距离以及相邻文字属性区域的块号中的至少一种。

同时为了进一步增强文字属性区域的识别准确性，本实施例还可以采用如下方法来识别文字属性区域，如图9所示，该方法包括以下具体步骤：

S910、若任一切割区域的邻近切割区域的界面属性是文字，则获取该切割区域的图像特征和该邻近切割区域的图像特征。

在本发明具体实施例中，当被检测的切割区域的邻近切割区域的界面属性为文字时，则同时获取被检测的切割区域的图像特征以及邻近切割区域的图像特征并进行比对。可以理解的是，为了将相邻切割区域的图像特征进行有效的比对，获取的至少两个图像特征必须为相同类型的图像特征，例如灰度直方图特征。

S920、若该切割区域的图像特征与该邻近切割区域的图像特征相似，则确定该切割区域的界面属性是文字。

在本发明具体实施例中，可以预先设定相似度阈值，对被检测切割区域的图像特征与邻近的文字属性区域的图像特征进行相似度计算，若相似度大于相似度阈值，则确定该被检测的切割区域的界面属性是文字。进一步的，可以根据多个邻近的文字属性区域的图像特征的相似度计算结果，综合确定该被检测的切割区域是否为文字属性区域。

S930、依据相邻文字属性区域的特征对文字属性区域进行聚合处理。

在本发明具体实施例中，相邻文字属性区域的特征包括单行文字高度、相邻文字属性区域之间的横向距离、相邻文字属性区域之间的纵向距离以及相邻文字属性区域的块号中的至少一种。

值得注意的是，本实施例可以依据上述两种文字属性检测方法中的至少一种进行切割区域的文字属性识别，为了提高文字属性区域的识别准确性，上述两种方法可以结合使用。

图10为本发明实施例三提供的识别图标属性区域的流程图，如图10所示，该方法包括以下具体步骤：

S1001、将各切割区域与预设的图标图片进行匹配。

在本发明具体实施例中，图标是指具有明确指代含义的计算机图形，便于用户对界面中的功能识别。鉴于同一款应用程序中的图标数量是有限的，因此本实施例预先积累目标应用中的所有图标建立图标库，并依据目标应用的更新时间进行图标库更新。基于模板匹配技术，预先设定相似度匹配阈值，将各切割区域与图标库中的预设图标进行匹配，若两者相似度大于预设的相似度匹配阈值，则确定该切割区域与所匹配的图标匹配成功。

S1002、若检测到任一切割区域与任一图标图片匹配，则确定该切割区域的界面属性是图标。

在本发明具体实施例中，对于与任一图标图片相匹配的任一切割区域，则确定该切割区域的界面属性是图标。

本实施例的技术方案，通过采用噪声监测技术来确定切割区域的图片属性，采用字符识别技术以及辅助的图像特征来确定切割区域或相邻切割区域的文字属性，采用图像匹配技术确定切割区域的图标属性，实现了自动地对用户界面中各个切割区域进行语义识别。避免了测试人员的人工分割和判断的过程，降低了应用前端页面测试的人工成本，提高了对用户界面布局的识别效率，为后续切割区域的聚合等工作的快速展开提供了依据。

实施例四

本实施例在上述实施例三的基础上，提供了用户界面图像切割方法的一个优选实施方式，能够对文字属性区域进行聚合处理。图11为本发明实施例四提供的聚合文字属性区域的流程图，如图11所示，该方法包括以下具体步骤：

S1101、依据相邻文字属性区域的块号确定位于相邻两个直线之间区域内的文字属性区域。

在本发明具体实施例中，考虑到用户界面中文字的普遍存在性和分散性，且内容相关的文字通常相距较近，因此本实施例依据相邻文字属性区域的块号确定位于相邻两个直线之间区域内的文字属性区域，供文字属性区域按行聚合使用。

S1102、依据相邻文字属性区域的特征，对位于相邻两个直线之间区域内的文字属性区域进行按行聚合处理。

在本发明具体实施例中，通过对位于相邻两个直线之间区域内的文字属性区域进行特征提取，依据相邻文字属性区域的特征，判断相邻文字属性区域是否可以聚合在一起。其中，相邻文字属性区域的特征包括单行文字高度、相邻文字属性区域之间的横向距离以及相邻文字属性区域之间的纵向距离中的至少一种。

具体的，由于不同字体的显示差异以及不同的显示设置对应的文字显示差异，单行文字高度、相邻文字属性区域之间的横向距离以及相邻文字属性区域之间的纵向距离均有所不同。但是对于相关内容例如一则新闻，其文字的显示通常是一致的。因此，依据上述相邻文字属性区域的特征，可以将同一行内特征相同的相邻文字属性区域聚合为一行，也可以将行聚合后相邻行中特征相同的相邻文字属性区域聚合为一个文字属性区域。从而将相关内容且相距较近文字属性区域聚合为完整的文字属性区域，便于文字属性区域的整合以及相关内容的确定。

优选的，若检测到文字属性区域中包括标点符号，则依据标点符号相邻文字的高度和宽度对所述标点符号进行纵向和横向拉伸；依据拉伸后的标点符号区域确定相邻文字属性区域是否聚合。

在本发明具体实施例中，对于文字中存在标点符号的现象，由于本实施例以图像特征为基础，而标点符号相对于文字来说所占的标点符号区域较小，影响文字属性区域的分割。因此本实施例对标点符号进行相应的拉伸处理，将标点符号处理为与相邻文字相同大小的标点符号区域，从而可以依据相同的文字属性区域聚合规则对包含标点符号的文字属性区域进行聚合处理，避免文字属性区域的不连续性。

本实施例的技术方案，通过对同时位于相邻两个直线之间区域内的文字属性区域进行确定，并依据相邻文字属性区域的特征，将被切割分散开来的文字属性区域进行聚合处理，保证了文字属性区域的完整性和连续性，提高后续界面布局的识别效率。

实施例五

本实施例在上述实施例的基础上，提供了用户界面图像切割方法的一个优选实施方式，能够自动对用户界面图像进行图像切割和语义识别。图12为本发明实施例五提供的一种用户界面图像切割方法的流程图，如图12所示，该方法包括以下具体步骤：

S1201、依据用户界面图像的像素灰度值对所述用户界面图像进行至少一次横向扫描和/或纵向扫描，得到所述用户界面图像中包括的横向切割线和/或纵向切割线。

S1202、依据所述横向切割线和/或纵向切割线将所述用户界面图像切割为多个区域。

S1203、对用户界面图像中包括的各区域进行至少一次横向扫描和/或纵向扫描，得到各区域包括的横向切割线和/或纵向切割线。

S1204、依据各区域包括的横向切割线和/或纵向切割线对各区域进行图像切割。

S1205、检测所述用户界面图像中直线长度与用户界面图像宽度的比值在预设比例阈值范围内的直线。

S1206、依据直线检测结果，为各切割区域进行块号标注。

S1207、对用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

S1208、依据相邻文字属性区域的特征对文字属性区域进行聚合处理。

S1209、依据各切割区域的界面属性区别展示不同界面属性的各切割区域。

示例性的，图13为本发明实施例五提供的用户界面切割和语义识别结果的示例图。由图13可知，两个用户界面中的文字属性区域、标点符号区域和相邻文字属性区域都得到了按行聚合处理，保证了每一行文字属性区域的完整性和连续性。同时图13中对文字属性区域、图片属性区域和图标属性区域进行了区别展示，其中将文字属性区域使用单实线框进行标注，将图片属性区域使用双实线框进行标注，将图标属性区域使用虚线框进行标注。便于对各界面属性对应的切割区域进行快速识别。此外，任何可以区别标注各界面属性对应的切割区域的方法都可以应用于本实施例中。

本实施例的技术方案，通过将用户界面视为一副完整的图像，通过图像处理技术对用户界面图像进行图像切割，并对各切割区域进行语义识别，确定各切割区域的属性信息。本发明实施例通过自动地对用户界面进行图像分割以及各切割区域的语义识别，避免了测试人员的人工判断过程，降低了应用前端页面测试的人工成本，从而提高了用户界面布局的识别效率，为后续发现并修复兼容性页面问题的快速展开提供了依据。

实施例六

图14为本发明实施例六提供的一种用户界面图像切割装置的结构示意图，本实施例可适用于识别用户界面布局的情况，该装置可实现本发明任意实施例所述的用户界面图像切割方法。该装置具体包括：

图像切割模块1410，用于检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；

语义识别模块1420，用于对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

优选的，所述图像切割模块1410具体用于：

依据用户界面图像的像素灰度值对所述用户界面图像进行至少一次横向扫描和/或纵向扫描，得到所述用户界面图像中包括的横向切割线和/或纵向切割线；

依据所述横向切割线和/或纵向切割线将所述用户界面图像切割为多个区域；

对所述用户界面图像中包括的各区域进行至少一次横向扫描和/或纵向扫描，得到各区域包括的横向切割线和/或纵向切割线；

依据各区域包括的横向切割线和/或纵向切割线对各区域进行图像切割。

进一步的，所述装置还包括：

直线检测模块1430，用于在所述检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割之后，检测所述用户界面图像中直线长度与用户界面图像宽度的比值在预设比例阈值范围内的直线；依据直线检测结果，为各切割区域进行块号标注。

优选的，所述语义识别模块1420包括图片识别单元1421；所述图片识别单元1421具体用于：

采用图像识别技术对所述用户界面图像中包括的各切割区域进行噪声检测；

若检测到任一切割区域的噪点个数大于噪点数量阈值，则确定该切割区域的界面属性是图片。

优选的，所述语义识别模块1420包括文字识别单元1422；所述文字识别单元1422具体用于：

若任一切割区域中的文字部分所占面积占该切割区域面积的比例值大于占比阈值，则确定该切割区域的界面属性是文字；或者，

若任一切割区域的邻近切割区域的界面属性是文字，且该切割区域的图像特征与该邻近切割区域的图像特征相似，则确定该切割区域的界面属性是文字。

优选的，所述语义识别模块1420还包括区域聚合单元1423；所述区域聚合单元1423具体用于：

在确定任一切割区域的界面属性是文字之后，依据相邻文字属性区域的特征对文字属性区域进行聚合处理。

优选的，所述相邻文字属性区域的特征包括单行文字高度、相邻文字属性区域之间的横向距离、相邻文字属性区域之间的纵向距离以及相邻文字属性区域的块号中的至少一种。

优选的，所述区域聚合单元1423具体用于：

若检测到文字属性区域中包括标点符号，则依据标点符号相邻文字的高度和宽度对所述标点符号进行纵向和横向拉伸；

依据拉伸后的标点符号区域确定相邻文字属性区域是否聚合。

优选的，所述语义识别模块1420包括图标识别单元1424；所述图标识别单元1424具体用于：

将各切割区域与预设的图标图片进行匹配；

若检测到任一切割区域与任一图标图片匹配，则确定该切割区域的界面属性是图标。

进一步的，所述装置还包括：

区别展示模块1440，用于在所述确定各切割区域的界面属性之后，依据各切割区域的界面属性区别展示不同界面属性的各切割区域。

本实施例的技术方案，通过各个功能模块之间的相互配合，实现了用户界面图像的高精度切割、直线的检测、切割区域语义的识别、切割区域的聚合以及不同界面属性对应的切割区域的区别展示等功能。本发明实施例通过自动地对用户界面进行图像分割以及各切割区域的语义识别，避免了测试人员的人工判断过程，降低了应用前端页面测试的人工成本，从而提高了用户界面布局的识别效率，为后续发现并修复兼容性页面问题的快速展开提供了依据。

实施例七

图15为本发明实施例七提供的一种服务器的结构示意图，图15示出了适于用来实现本发明实施例实施方式的示例性服务器的框图。图15显示的服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

图15显示的服务器12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图15所示，服务器12以通用计算设备的形式表现。服务器12的组件可以包括但不限于：一个或者多个处理器16，系统存储器28，连接不同系统组件(包括系统存储器28和处理器16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

服务器12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被服务器12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。服务器12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图15未显示，通常称为“硬盘驱动器”)。尽管图15中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。系统存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明实施例各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如系统存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明实施例所描述的实施例中的功能和/或方法。

服务器12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该服务器12交互的设备通信，和/或与使得该服务器12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，服务器12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与服务器12的其它模块通信。应当明白，尽管图中未示出，可以结合服务器12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理器16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的用户界面图像切割方法。

实施例八

本发明实施例八还提供一种计算机可读存储介质，其上存储有计算机程序(或称为计算机可执行指令)，该程序被处理器执行时用于执行一种用户界面图像切割方法，该方法包括：

检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；

对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明实施例进行了较为详细的说明，但是本发明实施例不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (13)

1.一种用户界面图像切割方法，其特征在于，包括：

检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；

对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

2.根据权利要求1所述的方法，其特征在于，所述检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割，包括：

依据用户界面图像的像素灰度值对所述用户界面图像进行至少一次横向扫描和/或纵向扫描，得到所述用户界面图像中包括的横向切割线和/或纵向切割线；

依据所述横向切割线和/或纵向切割线将所述用户界面图像切割为多个区域；

对所述用户界面图像中包括的各区域进行至少一次横向扫描和/或纵向扫描，得到各区域包括的横向切割线和/或纵向切割线；

依据各区域包括的横向切割线和/或纵向切割线对各区域进行图像切割。

3.根据权利要求1所述的方法，其特征在于，在所述检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割之后，还包括：

检测所述用户界面图像中直线长度与用户界面图像宽度的比值在预设比例阈值范围内的直线；

依据直线检测结果，为各切割区域进行块号标注。

4.根据权利要求1所述的方法，其特征在于，所述对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性，包括：

采用图像识别技术对所述用户界面图像中包括的各切割区域进行噪声检测；

若检测到任一切割区域的噪点个数大于噪点数量阈值，则确定该切割区域的界面属性是图片。

5.根据权利要求1所述的方法，其特征在于，所述对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性，包括：

若任一切割区域中的文字部分所占面积占该切割区域面积的比例值大于占比阈值，则确定该切割区域的界面属性是文字；或者，

若任一切割区域的邻近切割区域的界面属性是文字，且该切割区域的图像特征与该邻近切割区域的图像特征相似，则确定该切割区域的界面属性是文字。

6.根据权利要求5所述的方法，其特征在于，在确定任一切割区域的界面属性是文字之后，还包括：

依据相邻文字属性区域的特征对文字属性区域进行聚合处理。

7.根据权利要求6所述的方法，其特征在于，所述相邻文字属性区域的特征包括单行文字高度、相邻文字属性区域之间的横向距离、相邻文字属性区域之间的纵向距离以及相邻文字属性区域的块号中的至少一种。

8.根据权利要求6所述的方法，其特征在于，所述依据相邻文字属性区域的特征对文字属性区域进行聚合处理，包括：

若检测到文字属性区域中包括标点符号，则依据标点符号相邻文字的高度和宽度对所述标点符号进行纵向和横向拉伸；

依据拉伸后的标点符号区域确定相邻文字属性区域是否聚合。

9.根据权利要求1所述的方法，其特征在于，所述对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性，包括：

将各切割区域与预设的图标图片进行匹配；

若检测到任一切割区域与任一图标图片匹配，则确定该切割区域的界面属性是图标。

10.根据权利要求1所述的方法，其特征在于，在所述确定各切割区域的界面属性之后，还包括：

依据各切割区域的界面属性区别展示不同界面属性的各切割区域。

11.一种用户界面图像切割装置，其特征在于，包括：

图像切割模块，用于检测用户界面图像中包括的切割线，并依据检测到的切割线对所述用户界面图像进行图像切割；

语义识别模块，用于对所述用户界面图像中包括的各切割区域进行语义识别，确定各切割区域的界面属性。

12.一种服务器，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1至10中任一项所述的用户界面图像切割方法。

13.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至10中任一项所述的用户界面图像切割方法。