页面数据的生成方法、装置及电子设备与流程

本申请涉及计算机技术领域，特别涉及一种页面数据的生成方法、装置及电子设备。

背景技术

随着终端设备在人们工作和生活中的普及，应用于终端设备的应用程序也变得越来越多样化，对应用程序页面设计的需求也变得越来越大。目前来说，在进行页面设计时，通常需要人工在专业软件上直接进行编辑操作，从而得到设计出的页面，并生成相应的页面结构数据。但是，由于需要人工在专业软件上进行编辑，因此，操作繁琐，造成人力资源的浪费。同时，页面从设计到转换成前端数据的过程效率较低。

技术实现要素：

为了解决上述技术问题之一，本申请提供一种页面数据的生成方法、装置及电子设备。

根据本申请实施例的第一方面，提供一种页面数据的生成方法，包括：

识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；

基于所述目标区域对应的特征确定所述控件各自对应的目标类型；

根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；

根据所述目标布局参数生成所述页面的页面结构数据。

可选的，所述根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数，包括：

确定所述目标区域在所述目标图像中的原始尺寸及原始位置；

基于所述原始尺寸及原始位置确定所述页面中控件的初始布局参数；

根据所述目标类型及所述初始布局参数得到所述目标布局参数。

可选的，所述基于所述原始尺寸及原始位置确定所述页面中控件的初始布局参数，包括：

获取所述页面在所述目标图像中的尺寸作为参考尺寸；

获取预设的目标尺寸；

基于所述参考尺寸及所述目标尺寸确定所述页面的缩放参数；

采用所述缩放参数对所述原始尺寸及原始位置进行处理，得到所述页面中控件的初始布局参数。

可选的，所述根据所述目标类型及所述初始布局参数得到所述目标布局参数，包括：

基于所述初始布局参数及所述目标类型确定等距排列控件组、所述等距排列控件组各自对应的控件间距、对齐排列控件组、所述对齐排列控件组各自对应的对齐方式以及所述控件各自对应的标准尺寸；其中，任一所述等距排列控件组满足预设的行/列等距排列条件，任一所述对齐排列控件组满足至少一个预设的对齐条件；

按照所述等距排列控件组、所述等距排列控件组各自对应的控件间距、所述对齐排列控件组、所述对齐排列控件组各自对应的对齐方式以及所述控件各自对应的标准尺寸，确定所述目标布局参数；

其中，所述初始布局参数包括所述控件各自对应的临时尺寸及临时位置。

可选的，通过如下方式确定所述控件各自对应的标准尺寸：

基于所述目标类型确定所述控件各自对应的备选尺寸；

针对任一控件，从该控件对应的备选尺寸中选取与该控件对应的临时尺寸相似程度最高的备选尺寸作为该控件对应的标准尺寸。

可选的，通过如下方式确定所述等距排列控件组各自对应的控件间距：

针对任一等距排列控件组，根据该等距排列控件组中的控件各自对应的临时尺寸及临时位置，确定该等距排列控件组中相邻控件之间的距离均值，作为该等距排列控件组对应的控件间距。

可选的，通过如下方式确定所述对齐排列控件组各自对应的对齐方式：

针对任一对齐排列控件组，将该对齐排列控件组满足的对齐条件所对应的对齐方式确定该对齐排列控件对应的对齐方式。

可选的，所述识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域，包括：

确定所述目标图像中的目标轮廓；

确定所述目标轮廓各自对应的轮廓层级；

基于所述目标轮廓及所述轮廓层级确定所述目标图像中的页面、页面中的控件及所述控件各自对应的目标区域。

可选的，所述确定所述目标图像中的目标轮廓，包括：

对所述目标图像进行轮廓检测，得到多个轮廓；

基于预设的筛选规则，从所述多个轮廓中筛选出目标轮廓。

可选的，所述基于所述目标区域对应的特征确定所述控件各自对应的目标类型，包括：

采用预先训练的分类器对所述控件各自对应的目标区域的特征进行识别，得到所述控件各自对应的目标类型。

可选的，所述方法还包括：

基于所述页面结构数据进行渲染，生成并输出目标页面。

根据本申请实施例的第二方面，提供一种页面数据的生成装置，包括：

识别模块，用于识别目标图像中的页面、页面中的控件及所述控件各自对应的目标区域；

第一确定模块，用于基于所述目标区域对应的特征确定所述控件各自对应的目标类型；

第二确定模块，用于根据所述目标区域及所述目标类型确定所述页面中控件的目标布局参数；

生成模块，用于根据所述目标布局参数生成所述页面的页面结构数据。

根据本申请实施例的第三方面，提供一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面中任一项所述的方法。

根据本申请实施例的第四方面，提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述第一方面中任一项所述的方法。

本申请的实施例提供的技术方案可以包括以下有益效果：

本申请的实施例提供的页面数据的生成方法和装置，通过识别目标图像中的页面、页面中的控件及控件各自对应的目标区域，基于上述目标区域对应的特征确定控件各自对应的目标类型，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数，并根据页面中控件的目标布局参数生成页面的页面结构数据。从而无需在专业软件上通过人工编辑的方式设计页面，避免了资源的浪费，提高了页面从设计到转换成前端数据的过程的效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1a是本申请根据一示例性实施例示出的一种页面数据的生成方法的流程图；

如图1b-图1e是本申请根据一示例性实施例示出的一种页面数据的生成方法的场景示意图；

图2是本申请根据一示例性实施例示出的另一种页面数据的生成方法的流程；

图3是本申请根据一示例性实施例示出的另一种页面数据的生成方法的流程；

图4是本申请根据一示例性实施例示出的另一种页面数据的生成方法的流程；

图5是本申请根据一示例性实施例示出的一种页面数据的生成装置的框图；

图6是本申请根据一示例性实施例示出的另一种页面数据的生成装置的框图；

图7是本申请根据一示例性实施例示出的另一种页面数据的生成装置的框图；

图8是本申请根据一示例性实施例示出的另一种页面数据的生成装置的框图；

图9是本申请根据一示例性实施例示出的一种电子设备的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

如图1a所示，图1a是根据一示例性实施例示出的一种页面数据的生成方法的流程图，该方法可以应用于电子设备中，该电子设备可以包括但不限于服务器、诸如智能手机的移动终端设备、平板电脑、膝上型便携式电脑以及台式电脑等等。该方法包括以下步骤：

在步骤101中，识别目标图像中的页面、页面中的控件及控件各自对应的目标区域。

在本实施例中，目标图像为包含页面草图的待识别图像。在一种实现方式中，可以先手动绘制出页面草图，然后，对页面草图进行扫描或拍摄，得到目标图像。在另一种实现方式中，还可以直接在用于绘图的软件界面上，手动绘制页面草图(如，使用触控笔或手指等在触摸屏幕上绘制页面草图等)，并将手动绘制的页面草图存储为目标图像。可以理解，还可以通过其它任意合理的方式生成目标图像，本申请对此方面不限定。

在本实施例中，目标图像包含的页面草图中，可以包括一个或多个页面，每个页面中可以包含多个控件。可以首先识别出目标图像中的页面、页面中的控件及每个控件各自对应的目标区域。其中，控件对应的目标区域可以是识别出的该控件所占据的区域。

具体来说，在一种实现方式中，可以采用物体检测(objectdetection)技术，识别出目标图像中的页面、页面中的控件及控件各自对应的目标区域。在另一种实现方式中，也可以首先确定目标图像中的目标轮廓以及目标轮廓各自对应的轮廓层级。然后，基于目标轮廓及轮廓层级确定目标图像中的页面、页面中的控件及控件各自对应的目标区域。可以理解，还可以采用其它任意合理的方式确定目标图像中的页面、页面中的控件及控件各自对应的目标区域，本申请对此方面不限定。

在步骤102中，基于上述目标区域对应的特征确定控件各自对应的目标类型。

在本实施例中，可以根据需要预先设定多种控件的类型，例如，控件的类型可以包括但不限于文字类、按钮类、图标类、图像类等等，本申请对控件的类型的具体设定方面不限定。

在本实施例中，可以针对每个控件对应的目标区域，提取该目标区域对应的特征，该特征可以包括但不限于该目标区域对应的harr特征，hog(histogramoforientedgradient，方向梯度直方图)特征，以及轮廓集合特征等等。其中，harr特征为一种能够反映图像灰度变化的，像素分模块求差值的特征。harr特征可以分为边缘特征、线性特征、中心特征和对角线特征。hog特征为一种在计算机视觉和图像处理中用来进行物体检测的特征描述子，一般通过计算和统计图像局部区域的梯度方向直方图来构成hog特征。

在一种实现方式中，可以采用机器学习的方式，用预先训练的分类器(例如，随机森林分类器等)对控件对应的目标区域的特征进行识别，得到控件各自对应的目标类型。具体来说，针对任意一个控件，可以将该控件对应的目标区域的特征输入到预先训练的分类器中，并根据该分类器输出的结果确定该控件对应的目标类型。

在另一种实现方式中，针对任意一个控件，还可以将该控件对应的目标区域的特征分别与每种控件类型所对应的参考特征进行比较，将相似度最大的参考特征所对应的控件类型作为该控件对应的目标类型。

可以理解，还可以通过其它任意合理的方式确定控件各自对应的目标类型，本申请对此方面不限定。

在步骤103中，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数。

在本实施例中，可以根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数。其中，页面中控件的目标布局参数可以包括页面中每个控件的尺寸参数、位置参数以及样式参数等，本申请对目标布局参数的具体内容方面不限定。

具体来说，在一种实现方式中，可以首先确定控件各自对应的目标区域在目标图像中的原始尺寸及原始位置，然后，基于控件各自对应的原始尺寸及原始位置，确定页面中控件的初始布局参数，最后，根据控件各自对应的目标类型及页面中控件的初始布局参数，得到目标布局参数。

在另一种实现方式中，也可以确定控件各自对应的目标区域在目标图像中的原始中心位置。然后，确定每个控件的目标类型所匹配的尺寸，作为该控件对应的目标尺寸。最后，按照每个控件对应的目标尺寸，根据该控件对应的原始中心位置对控件进行布局，得到目标布局参数。

可以理解，还可以通过其它任意合理的方式确定页面中控件的目标布局参数，本申请对此方面不限定。

在步骤104中，根据页面中控件的目标布局参数生成页面的页面结构数据。

在本实施例中，可以根据页面中控件的目标布局参数生成页面的页面结构数据，其中，页面结构数据可以是能够用于在前端生成页面的数据，页面结构数据记录有页面的结构信息。页面结构数据可以具有任意合理的格式，例如，可以是json(javascriptobjectnotation，js对象标记)格式的数据。可以理解，本申请对页面结构数据的具体格式方面不限定。

本申请的上述实施例提供的页面数据的生成方法，通过识别目标图像中的页面、页面中的控件及控件各自对应的目标区域，基于上述目标区域对应的特征确定控件各自对应的目标类型，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数，并根据页面中控件的目标布局参数生成页面的页面结构数据。从而无需在专业软件上通过人工编辑的方式设计页面，避免了资源的浪费，提高了页面从设计到转换成前端数据的过程的效率。

如图1b-图1e所示，图1b-图1e是根据一示例性实施例示出的页面数据的生成的场景示意图。如图1b所示，图像111为目标图像，图像111中包含人工绘制的页面草图。首先，可以通过轮廓检测的算法，得到目标图像中的目标轮廓。如图1c所示，图中的轮廓为检测出的目标图像中的目标轮廓。然后，确定目标轮廓的轮廓层级，并基于目标轮廓及相应的轮廓层级确定目标图像中的页面、页面中的控件及控件各自对应的目标区域。如图1d所示，图中被标记出的矩形区域即为控件各自对应的目标区域。可以进一步根据上述目标区域的特征，确定控件各自对应的目标类型。最后，根据控件各自对应的目标区域及目标类型，确定页面中控件的目标布局参数，并根据该目标布局参数生成页面的页面结构数据。如图1e所示，页面112为对该页面结构数进行渲染而生成的页面。从而，高效的将绘制的页面草图准确的转换为前端数据。

如图2所示，图2根据一示例性实施例示出的另一种页面数据的生成方法的流程图，该实施例详细描述了识别目标图像中的页面、页面中的控件及控件各自对应的目标区域的过程，该方法可以应用于电子设备中，包括以下步骤：

在步骤201中，确定目标图像中的目标轮廓。

在本实施例中，可以直接对目标图像进行轮廓检测(例如，采用findcontours函数进行轮廓检测)，并基于轮廓检测的结果确定目标图像中的目标轮廓。也可以先对目标图像进行预处理，例如，对目标图像进行模糊去噪和/或边缘检测(如，采用canny算子进行边缘检测等)，然后，对经过预处理的目标图像进行轮廓检测，从而确定目标图像中的目标轮廓。

具体来说，在一种实现方式中，可以直接将检测到的全部轮廓确定为目标图像中的目标轮廓。在另一种实现方式中，还可以在对目标图像进行轮廓检测后，基于预设的筛选规则，从得检测到的多个轮廓中筛选出目标轮廓。例如，可以采用非极大值抑制算法去除上述多个轮廓中的多余轮廓，和/或按照预设的尺寸条件(例如，轮廓包围的面积条件，或者轮廓的长宽比条件等)去除上述多个轮廓中的多余轮廓，从而筛选出目标轮廓。可以理解，本申请对确定目标图像中的目标轮廓的具体方式方面不限定。

在步骤202中，确定目标轮廓各自对应的轮廓层级。

在步骤203中，基于目标轮廓及相应的轮廓层级确定目标图像中的页面、页面中的控件及控件各自对应的目标区域。

在本实施例中，可以基于目标轮廓及相应的轮廓层级确定目标图像中的页面、页面中的控件及控件各自对应的目标区域。例如，可以将不存在父级轮廓的目标轮廓作为页面轮廓，将页面轮廓的子级轮廓作为页面行轮廓，将页面行轮廓的子级轮廓作为页面中的控件轮廓，将基于控件轮廓得到的区域作为控件对应的目标区域。

在步骤204中，基于上述目标区域对应的特征确定控件各自对应的目标类型。

在步骤205中，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数。

在步骤206中，根据页面中控件的目标布局参数生成页面的页面结构数据。

需要说明的是，对于与图1a实施例中相同的步骤，在上述图2实施例中不再进行赘述，相关内容可参见图1a实施例。

本申请的上述实施例提供的页面数据的生成方法，通过确定目标图像中的目标轮廓以及目标轮廓各自对应的轮廓层级，基于目标轮廓及相应的轮廓层级确定目标图像中的页面、页面中的控件及控件各自对应的目标区域，基于上述目标区域对应的特征确定控件各自对应的目标类型，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数，并根据页面中控件的目标布局参数生成页面的页面结构数据。由于本实施例考虑了目标图像中轮廓的层级关系，因此，能够实现对目标图像中的页面、页面中的控件及控件各自对应的目标区域的准确及快速的识别，也有助于提高了页面从设计到转换成前端数据的过程的效率。

如图3所示，图3根据一示例性实施例示出的另一种页面数据的生成方法的流程图，该实施例描述了确定页面中控件的目标布局参数的过程，该方法可以应用于电子设备中，包括以下步骤：

在步骤301中，识别目标图像中的页面、页面中的控件及控件各自对应的目标区域。

在步骤302中，基于上述目标区域对应的特征确定控件各自对应的目标类型。

在步骤303中，确定控件各自对应的目标区域在目标图像中的原始尺寸及原始位置。

在本实施例中，可以根据目标图像中像素点的信息确定控件各自应对的目标区域在目标图像中的原始尺寸及原始位置。

在步骤304中，基于原始尺寸及原始位置确定页面中控件的初始布局参数。

在本实施例中，可以基于控件各自对应的原始尺寸及原始位置确定页面中控件的初始布局参数。具体来说，首先可以获取页面在目标图像中的实际的尺寸(例如，页面在目标图像中的宽度尺寸，或者长度尺寸，或者对角钱尺寸等)作为参考尺寸，并获取预设的尺寸(例如，预设的页面宽度尺寸，或者预设的页面长度尺寸，或者预设的页面对角钱尺寸等)作为目标尺寸。然后，基于上述参考尺寸及目标尺寸确定页面的缩放参数(例如，可以用上述目标尺寸除以上述参考尺寸，得到页面的缩放参数)。接着，采用该缩放参数对控件各自对应的原始尺寸及原始位置进行处理，即，采用该缩放参数对页面中控件的原始分布进行缩放，得到页面中控件的初始布局参数。其中，页面中控件的初始布局参数至少可以包括页面中控件各自对应的临时尺寸及临时位置。

在步骤305中，根据控件各自对应的目标类型及控件的初始布局参数得到页面中控件的目标布局参数。

在本实施例中，可以根据控件各自对应的目标类型及控件的初始布局参数得到页面中控件的目标布局参数。具体来说，首先，可以基于控件的初始布局参数及控件各自对应的目标类型确定等距排列控件组、等距排列控件组各自对应的控件间距、对齐排列控件组、对齐排列控件组各自对应的对齐方式以及控件各自对应的标准尺寸。其中，任意一个等距排列控件组满足预设的行/列等距排列条件，任意一个对齐排列控件组满足至少一个预设的对齐条件。接着，按照等距排列控件组、等距排列控件组各自对应的控件间距、对齐排列控件组、对齐排列控件组各自对应的对齐方式以及控件各自对应的标准尺寸，确定目标布局参数。

具体地，可以预先设定每个目标类型对应的一种或多种备选尺寸。针对任意一个控件，可以基于该控件对应的目标类型确定该控件对应的备选尺寸，从该控件对应的备选尺寸中选取与该控件对应的临时尺寸相似程度最高的备选尺寸作为该控件对应的标准尺寸。例如，可以获取该控件对应的每个备选尺寸与该控件对应的临时尺寸之间的交集或并集，将与相应的交集或并集的尺寸最接近的备选尺寸作为该控件对应的标准尺寸。可以理解，还可以通过其它任意合理的方式计算控件对应的每个备选尺寸与该控件对应的临时尺寸之间的相似程度，本申请对此方面不限定。

在本实施例中，等距排列控件组可以有一个或多个，每个等距排列控件组中的控件需要按照行的方向或列的方向进行等距排列。任意一个等距排列控件组满足预设的行/列等距排列条件，预设的行/列等距排列条件可以是能够用于筛选需要等距排列的多个控件的条件，可以包括任意合理的内容。可以根据预设的行/列等距排列条件，将页面中需要等距排列的多个控件进行分组。例如，可以将页面中对应的临时位置在行/列的方向上的差值小于预设差值的多个控件分为一组，作为一个等距排列控件组。

在本实施例中，在确定等距排列控件组后，接着可以确定每个等距排列控件组各自对应的控件间距，即该控件组中的控件在等距排列时，相邻控件之间的间距。针对任一等距排列控件组，可以根据该等距排列控件组中的控件各自对应的临时尺寸及临时位置，确定该等距排列控件组中相邻控件之间的距离均值，作为该等距排列控件组对应的控件间距。

在本实施例中，对齐排列控件组也可以有一个或多个，每个对齐排列控件组中的控件需要按照预设的对齐方式进行对齐排列。任意一个对齐排列控件组满足至少一个预设的对齐条件，预设的对齐条件可以是能够用于筛选需要进行对齐排列的多个控件的条件，可以包括任意合理的内容。预设的对齐方式可以包括多种，每种对齐方式对应一个对齐条件。例如，对齐方式可以包括但不限于按照行的方向进行上对齐的方式，按照行的方向进行中对齐的方式，按照行的方向进行下对齐的方式，按照列的方向进行左对齐的方式，按照列的方向进行中对齐的方式，按照列的方向进行右对齐的方式等等。可以根据每种对齐方式对应对齐条件，将页面中需要对齐排列的多个控件进行分组。例如，可以根据行方向中对齐的方式所对应的对齐条件，将页面中行的方向上中心位置的差值小于预设差值的多个控件分为一组，作为一个对齐排列控件组等。并且，针对任一对齐排列控件组，可以将该对齐排列控件组满足的对齐条件所对应的对齐方式作为该对齐排列控件对应的对齐方式。

需要说明的是，可以按照任意合理的顺序分别确定等距排列控件组、等距排列控件组各自对应的控件间距、对齐排列控件组、对齐排列控件组各自对应的对齐方式以及控件各自对应的标准尺寸，本申请对此方面不限定。

在步骤306中，根据页面中控件的目标布局参数生成页面的页面结构数据。

需要说明的是，对于与图1a和图2实施例中相同的步骤，在上述图3实施例中不再进行赘述，相关内容可参见图1a和图2实施例。

本申请的上述实施例提供的页面数据的生成方法，通过识别目标图像中的页面、页面中的控件及控件各自对应的目标区域，基于上述目标区域对应的特征确定控件各自对应的目标类型，确定控件各自对应的目标区域在目标图像中的原始尺寸及原始位置，基于原始尺寸及原始位置确定页面中控件的初始布局参数，并根据控件各自对应的目标类型及控件的初始布局参数得到页面中控件的目标布局参数，根据页面中控件的目标布局参数生成页面的页面结构数据。由于本实施例考虑到了目标图像中页面控件的原始分布不够精准和齐整，因此，基于控件各自对应的目标类型及控件各自对应的目标区域在目标图像中的原始尺寸及原始位置，对页面中控件的布局进行适当的调整，得到目标布局参数，使得基于目标布局参数生成的页面中，控件的布局更为精准和齐整。

如图4所示，图4根据一示例性实施例示出的另一种页面数据的生成方法的流程图，该实施例详细描述了修改页面结构数据的过程，该方法可以应用于电子设备中，包括以下步骤：

在步骤401中，识别目标图像中的页面、页面中的控件及控件各自对应的目标区域。

在步骤402中，基于上述目标区域对应的特征确定控件各自对应的目标类型。

在步骤403中，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数。

在步骤404中，根据页面中控件的目标布局参数生成页面的页面结构数据。

在步骤405中，基于上述页面结构数据进行渲染，生成并输出目标页面。

在步骤406中，基于用户对目标页面的调整操作对页面结构数据进行修改。

在本实施例中，可以基于上述页面结构数据进行渲染，从而生成并输出目标页面。用户可以通过用户界面对目标页面进行调整操作，以对页面结构数据进行修改。其中，用户对目标页面进行的调整操作可以包括对页面中的控件进行拖拽移动，或放大缩小等等，本申请对调整操作的具体方式方面不限定。当用户完成调整操作后，可以将原来的页面结构数据进行修改，得到新的页面结构数据，以满足用户的设计需要。

需要说明的是，对于与图1a-图3实施例中相同的步骤，在上述图4实施例中不再进行赘述，相关内容可参见图1a-图3实施例。

本申请的上述实施例提供的页面数据的生成方法，通过识别目标图像中的页面、页面中的控件及控件各自对应的目标区域，基于上述目标区域对应的特征确定控件各自对应的目标类型，根据控件各自对应的目标区域及控件各自对应的目标类型确定页面中控件的目标布局参数，根据页面中控件的目标布局参数生成页面的页面结构数据。并基于上述页面结构数据进行渲染，生成并输出目标页面，基于用户对目标页面的调整操作对页面结构数据进行修改。由于本实施例可以基于用户的操作对由目标布局参数生成的页面结构数据进行修改，因此，能够使得基于目标布局参数生成的页面中，控件的布局进一步满足设计需求。

应当注意，尽管在上述实施例中，以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

与前述页面数据的生成方法实施例相对应，本申请还提供了页面数据的生成装置的实施例。

如图5所示，图5是本申请根据一示例性实施例示出的一种页面数据的生成装置框图，该装置可以包括：识别模块501，第一确定模块502，第二确定模块503和生成模块504。

其中，识别模块501，用于识别目标图像中的页面、页面中的控件及控件各自对应的目标区域。

第一确定模块502，用于基于上述目标区域对应的特征确定控件各自对应的目标类型。

第二确定模块503，用于根据上述目标区域及上述目标类型确定页面中控件的目标布局参数。

生成模块504，用于根据上述目标布局参数生成页面的页面结构数据。

如图6所示，图6是本申请根据一示例性实施例示出的另一种页面数据的生成装置框图，该实施例在前述图5所示实施例的基础上，第二确定模块503可以包括：第一确定子模块601，第二确定子模块602和获取子模块603。

其中，第一确定子模块601，用于确定上述目标区域在目标图像中的原始尺寸及原始位置。

第二确定子模块602，用于基于该原始尺寸及原始位置确定页面中控件的初始布局参数。

获取子模块603，用于根据上述目标类型及上述初始布局参数得到目标布局参数。

在一些可选实施方式中，第二确定子模块602被配置用于：获取页面在目标图像中的尺寸作为参考尺寸，获取预设的目标尺寸，基于参考尺寸及目标尺寸确定页面的缩放参数，采用该缩放参数对上述原始尺寸及原始位置进行处理，得到页面中控件的初始布局参数。

在另一些可选实施方式中，获取子模块603被配置用于：基于初始布局参数及上述目标类型确定等距排列控件组、等距排列控件组各自对应的控件间距、对齐排列控件组、对齐排列控件组各自对应的对齐方式以及控件各自对应的标准尺寸。其中，任一等距排列控件组满足预设的行/列等距排列条件，任一对齐排列控件组满足至少一个预设的对齐条件。

按照等距排列控件组、等距排列控件组各自对应的控件间距、对齐排列控件组、对齐排列控件组各自对应的对齐方式以及控件各自对应的标准尺寸，确定目标布局参数。其中，初始布局参数包括控件各自对应的临时尺寸及临时位置。

在另一些可选实施方式中，获取子模块603通过如下方式确定控件各自对应的标准尺寸：基于上述目标类型确定控件各自对应的备选尺寸，针对任一控件，从该控件对应的备选尺寸中选取与该控件对应的临时尺寸相似程度最高的备选尺寸作为该控件对应的标准尺寸。

在另一些可选实施方式中，获取子模块603通过如下方式确定等距排列控件组各自对应的控件间距：针对任一等距排列控件组，根据该等距排列控件组中的控件各自对应的临时尺寸及临时位置，确定该等距排列控件组中相邻控件之间的距离均值，作为该等距排列控件组对应的控件间距。

在另一些可选实施方式中，获取子模块603通过如下方式确定对齐排列控件组各自对应的对齐方式：针对任一对齐排列控件组，将该对齐排列控件组满足的对齐条件所对应的对齐方式确定为该对齐排列控件对应的对齐方式。

如图7所示，图7是本申请根据一示例性实施例示出的另一种页面数据的生成装置框图，该实施例在前述图5所示实施例的基础上，识别模块501可以包括：轮廓检测子模块701，层级子模块702和识别子模块703。

其中，轮廓检测子模块701，用于确定目标图像中的目标轮廓。

层级子模块702，用于确定目标轮廓各自对应的轮廓层级。

识别子模块703，用于基于目标轮廓及相应的轮廓层级确定目标图像中的页面、页面中的控件及控件各自对应的目标区域。

在另一些可选实施方式中，轮廓检测子模块701被配置用于：对目标图像进行轮廓检测，得到多个轮廓，基于预设的筛选规则，从多个轮廓中筛选出目标轮廓。

在另一些可选实施方式中，第一确定模块502被配置用于：采用预先训练的分类器对控件各自对应的目标区域的特征进行识别，得到控件各自对应的目标类型。

如图8所示，图8是本申请根据一示例性实施例示出的另一种页面数据的生成装置框图，该实施例在前述图5所示实施例的基础上，该装置还可以进一步包括：输出模块505和修改模块506。

其中，输出模块505，用于基于上述页面结构数据进行渲染，生成并输出目标页面。

修改模块506，用于基于用户对目标页面的调整操作对上述页面结构数据进行修改。

应当理解，上述装置可以预先设置在电子设备中，也可以通过下载等方式而加载到电子设备中。上述装置中的相应模块可以与电子设备中的模块相互配合以实现页面数据的生成方案。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本申请实施例还提供了一种计算机可读存储介质，该存储介质存储有计算机程序，计算机程序可用于执行上述图1a至图4任一实施例提供的页面数据的生成方法。

对应于上述的页面数据的生成方法，本申请实施例还提出了图9所示的根据本申请的一示例性实施例的电子设备的示意结构图。请参考图9，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面数据的生成装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。