CN111986292A - 图层还原方法、装置、计算机可读存储介质和计算机设备 - Google Patents

Abstract

本申请涉及一种图层还原方法、装置、计算机可读存储介质和计算机设备，该方法包括：获取待处理图片，待处理图片中未包含图层信息。对待处理图片进行图层识别构造图层树，根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。对未包含图层信息的待处理图片进行图层识别，并构造了图层树。因为图层树包含了图层结构信息，所以依据待处理图片的图层树，就可以对待处理图片进行图层还原。

Description

图层还原方法、装置、计算机可读存储介质和计算机设备

技术领域

本申请涉及计算机技术领域，特别是涉及一种图层还原方法、装置、计算机可读存储介质和计算机设备。

背景技术

传统方法中，设计师在使用网上的图片素材的时候，因为网上的图片素材很多都是JPEG(全称是JointPhotographic Experts Group)格式、PNG(全称是Portable NetworkGraphics)格式，该格式的图片不包含图层信息，所以设计师往往需要手工对网上的图片素材进行处理，才能还原为UI(UserInterface，用户界面)设计稿中的图层，这其中耗费的工作量十分巨大。

发明内容

基于此，有必要针对手工还原图层的工作量太大的技术问题，提供一种图层还原方法、装置、计算机可读存储介质和计算机设备。

一种图层还原方法，包括：

获取待处理图片，所述待处理图片中未包含图层信息；

对所述待处理图片进行图层识别构造图层树；

根据所述图层树对所述待处理图片进行图层还原，得到具有图层信息的设计稿图片。

一种图层还原装置，所述装置包括：

待处理图片获取模块，用于获取待处理图片，所述待处理图片中未包含图层信息；

图层识别模块，用于对所述待处理图片进行图层识别构造图层树；

图层还原模块，用于根据所述图层树对所述待处理图片进行图层还原，得到具有图层信息的设计稿图片。

一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如上所述方法的步骤。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如上所述方法的步骤。

上述图层还原方法、装置、计算机可读存储介质和计算机设备，获取待处理图片，待处理图片中未包含图层信息。对待处理图片进行图层识别构造图层树，根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。对未包含图层信息的待处理图片进行图层识别，并构造了图层树。因为图层树包含了图层结构信息，所以依据待处理图片的图层树，就可以对待处理图片进行图层还原。

附图说明

图1为一个实施例中图层还原方法的应用环境图；

图2为一个实施例中图层还原方法的流程示意图；

图3为图2中对待处理图片进行图层识别构造图层树方法的流程示意图；

图4为图3中对待处理图片进行文本图层识别得到文本图层实例方法的流程示意图；

图5为一个实施例中对待处理图片进行文本区域检测的界面示意图；

图6为一个实施例中文本内容识别结果示意图；

图7为图3中对待处理图片进行图形图层识别得到图形图层实例方法的流程示意图；

图8为图3中对待处理图片进行图像图层识别得到图像图层实例方法的流程示意图；

图9为图3中构造图层树方法的流程示意图；

图10为一个实施例中具有包含关系的图层实例的示意图；

图11为另一个实施例中图层还原方法的流程示意图；

图12为一个具体实施例中图层还原方法的流程示意图；

图13为一个实施例中图片转设计稿工具的首页的界面示意图；

图14为一个实施例中图片转设计稿工具的工具页的界面示意图；

图14A为一个实施例中在工具页选择导出全部图层所得到的设计稿图片；

图14B为一个实施例中在工具页选择导出部分图层所得到的设计稿图片；

图15为一个实施例中图层还原装置的结构框图；

图16为图15中图层识别模块的结构框图；

图17为图16中文本图层识别单元的结构框图；

图18为图16中图形图层识别单元的结构框图；

图19为图16中图像图层识别单元的结构框图；

图20为图16中图层树构造单元的结构框图；

图21为另一个实施例中图层还原装置的结构框图；

图22为一个实施例中计算机设备的结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

图1为一个实施例中图层还原方法的应用环境图。参照图1，该图层还原方法应用于图层还原系统。该图层还原系统包括终端110和服务器120。终端110和服务器120通过网络连接。终端110具体可以是台式终端或移动终端，移动终端具体可以是手机、平板电脑、笔记本电脑等中的至少一种。服务器120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。该图层还原方法包括：获取待处理图片，待处理图片中未包含图层信息；对待处理图片进行图层识别构造图层树；根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。

如图2所示，在一个实施例中，提供了一种图层还原方法。本实施例主要以该方法应用于上述图1中的服务器120来举例说明。参照图2，该图层还原方法具体包括如下步骤：

S220，获取待处理图片，待处理图片中未包含图层信息。

获取待处理图片，其中待处理图片可以是从网上下载的图片素材，且该图片素材中未包含图层信息。具体的，一般情况下从网上所下载的图片多为JPEG格式、PNG格式等，压缩为JPEG及PNG格式之后，则这些格式的图片就不包含图层信息。而PSD(PhotoshopDocument)和TIF(Tagged Image File Format，标签图像文件格式)格式的图片在压缩过程中则保留了图层信息。

S240，对待处理图片进行图层识别构造图层树。

对未包含图层信息的待处理图片进行图层识别构造图层树。待处理图片中包含文字信息、图形信息及图像信息等，且待处理图片就是由文字信息、图形信息及图像信息所对应的不同的图层所构成的。所以，对待处理图片进行图层识别，识别出文字信息、图形信息及图像信息所对应的不同的图层，进而由不同的图层构成图层树。图层树中包含了待处理图片中的不同图层，且包含了不同图层之间的结构关系。

S260，根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。

因为图层树中包含了待处理图片中的不同图层，且包含了不同图层之间的结构关系，所以根据图层树就可以对待处理图片进行图层还原。即将待处理图片的图层结构信息还原出来，得到具有图层信息的设计稿图片。设计人员就可以对设计稿图片中的不同的图层直接进行自由编辑修改，从而得到编辑修改后的图片。

本申请实施例中，获取待处理图片，待处理图片中未包含图层信息。对待处理图片进行图层识别构造图层树，根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。对未包含图层信息的待处理图片进行图层识别，并构造了图层树。因为图层树包含了图层结构信息，所以依据待处理图片的图层树，就可以对待处理图片进行图层还原。

在一个实施例中，如图3所示，S240，对待处理图片进行图层识别构造图层树，包括：

S242，对待处理图片进行文本图层识别得到文本图层实例。

待处理图片就是由文字信息、图形信息及图像信息所对应的不同的图层所构成的。所以，首先对待处理图片进行文本图层识别，即对待处理图片中的文字信息进行识别，进而根据所识别出的文字信息相应地创建文本图层实例。此处的文字具体包含文字(包括中英文及各国文字等)、数字(包括阿拉伯数字及罗马数字等)及符号(包括标点符号标点符号及运算符号等专用符号)等。当然，以上并不是穷举，还可以包括其他形式的文字。相应地，文字信息指文字、数字及符号所对应的信息包括但不限于文字、数字及符号所对应的坐标、宽高、内容、颜色、大小等信息。其中，坐标指的就是文字或数字或符号在待处理图片中所出现的位置的坐标。宽高指的就是文字或数字或符号在待处理图片中所呈现的宽高。待处理图片中包含多处文字信息，则将对应创建多个文本图层实例。对每一处文字信息，则对应创建一个文本图层实例，文本图层实例指的是包含一处文字信息的图层。

S244，对待处理图片进行图形图层识别得到图形图层实例。

在对待处理图片进行文本图层识别得到文本图层实例之后，进一步对待处理图片进行图形图层识别得到图形图层实例。具体的，对待处理图片中所包含的图形信息进行识别，并根据所识别出的图形信息相应地创建图形图层实例。此处的图形具体指待处理图片中的基础几何图形，包括规则几何图形和不规则几何图形，包括平面几何图形和立体几何图形。其中，平面几何图形包括(1)圆形：包括正圆，椭圆，多焦点圆——卵圆。(2)多边形：三角形、四边形、五边形等。(3)弓形：优弧弓、劣弧弓、抛物线弓等。(4)多弧形：月牙形、谷粒形、太极形、葫芦形等。

相应地，图形信息指上述基础几何图形所对应的信息，包括但不限于基础几何图形的坐标、宽高、图形类型、图形颜色、路径集合、半径、圆角等信息。其中，坐标指的就是图形在待处理图片中所出现的位置的坐标。宽高指的就是图形在待处理图片中所呈现的宽高。路径集合指的是创建图形的路径，例如通过SVG(Scalable Vector Graphics，可缩放的矢量图形)的path来获取图形的路径集合。其中，path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形，以及一些其他形状，例如贝塞尔曲线、2次曲线等曲线。在通过SVG获取到图形的路径集合之后，可以调用第三方设计软件的接口来根据图形的路径集合进行重绘图形图层实例。其中，第三方设计软件可以是photoshop、skepch、Adobe XD等。

待处理图片中包含多处图形信息，则将对应创建多个图形图层实例。对每一处图形信息，则对应创建一个图形图层实例，图形图层实例指的是包含一处图形信息的图层。

S246，对待处理图片进行图像图层识别得到图像图层实例。

在对待处理图片进行图形图层识别得到图形图层实例之后，进一步对待处理图片进行图像图层识别得到图像图层实例。具体的，对待处理图片中所包含的图像信息进行识别，并根据所识别出的图像信息相应地创建图像图层实例。此处图像指的是待处理图片中识别出文本图层实例、图形图层实例之后，所剩下的复杂区域。在对待处理图片中的复杂区域进行识别时采用抠图处理。相应地，图像信息指的是上述复杂区域对应的坐标、宽高及图片路径等信息。其中，坐标指的就是所需要抠图的图像在待处理图片中所出现的位置的坐标。宽高指的就是所需要抠图的图像在待处理图片中所呈现的宽高。图片路径指的是经过抠图后生成的图片文件的地址。待处理图片中包含多处图像信息，则将对应创建多个图像图层实例。对每一处图像信息，则对应创建一个图像图层实例，图像图层实例指的是包含一处图像信息的图层。

S248，根据文本图层实例、图形图层实例及图像图层实例创建组图层实例，由组图层实例构造图层树。

在对待处理图片进行上述三种识别得到多个文本图层实例、多个图形图层实例及多个图像图层实例之后，根据这些图层实例之间的关系创建组图层实例，然后再由组图层实例构造待处理图片的图层树。图层树中包含待处理图片中的各图层实例，且包括不同图层实例之间的关系。

本申请实施例中，对待处理图片中的文字信息、图形信息及图像信息进行分别识别，得到多个文本图层实例、多个图形图层实例及多个图像图层实例。从而实现了将待处理图片中所包含的文字信息、图形信息及图像信息进行拆解，并创建出待处理图片的图层树，根据图层树对待处理图像进行了图层还原。将不包含图层信息的JPEG或PNG格式的图片，通过重绘得到PSD(Photoshop Document)或TIF(Tagged Image File Format，标签图像文件格式)格式的图片，从而就可以选中图层树中的任意图层进行编辑。

在一个实施例中，如图4所示，S242，对待处理图片进行文本图层识别得到文本图层实例，包括：

S242a，对待处理图片进行文本区域检测得到文本区域。

文本区域检测是指对待处理图片的文本区域进行检测，得到文本区域。如图5所示，图中方框内指的是文本区域。文本区域指包含文字的区域，一张待处理图片中会包含多个文本区域。可以采用EAST算法来进行文本区域检测，其中EAST(Efficient and AccuracyScene Text)算法可以实现高效和准确地场景文本检测。

S242b，对文本区域进行文本内容识别得到文本内容识别结果。

在得到文本区域之后，对文本区域进行文本内容识别，具体的，可以采用RNN+CTC模型来进行识别。其中，RNN(Recurrent Neural Network)是一类用于处理序列数据的神经网络。CTC(Connectionist Temporal Classification)是一种损失函数，用来衡量输入的序列数据经过RNN神经网络之后所得到的输出与真实的输出之间的差距。经过RNN+CTC模型进行文本内容识别之后得到文本内容和对应的置信度。如图6所示，为对图5方框内的文本区域进行文本内容识别得到文本内容识别结果。

S242c，对文本内容识别结果计算属性信息，得到文本内容识别结果的属性信息。

在得到如图6所示的文本内容识别结果之后，对文本内容识别结果计算属性信息。具体的，计算每一个文本内容的属性信息，例如计算每一个文本内容所对应的坐标、宽高、内容、颜色、大小等信息。

S242d，根据文本内容识别结果及文本内容识别结果的属性信息创建文本图层实例。

文本内容识别结果中包括文本内容识别之后得到文本内容和对应的置信度。文本内容识别结果的属性信息包括每一个文本内容所对应的坐标、宽高、内容、颜色、大小等信息。所以，根据文本内容以及每一个文本内容所对应的坐标、宽高、内容、颜色、大小等信息就可以创建文本图层实例。

本申请实施例中，通过文本区域检测得到待处理图片中的文本区域，然后对文本区域进行文本内容识别得到文本内容和对应的置信度，进而获取文本内容的属性信息。属性信息包括每一个文本内容所对应的坐标、宽高、内容、颜色、大小等信息。从而，根据文本内容及文本内容的属性信息就可以对待处理图片中的文本信息进行重绘，创建出待处理图片的文本图层实例。

在一个实施例中，如图7所示，S244，对待处理图片进行图形图层识别得到图形图层实例，包括：

S244a，对待处理图片进行文本区域过滤，得到第一目标图片。

文本区域过滤的过程指的是获取待处理图片中文本区域的边界色，根据文本区域的边界色对文本区域进行颜色填充，从而得到第一目标图片。第一目标图片为对图5中方框内的文本区域，都采用该文本区域的边界色进行颜色填充，将文本区域进行覆盖。即第一目标图片中不含文本区域。

S244b，对第一目标图片进行图形检测，得到图形检测结果。

在得到第一目标图片之后，对第一目标图片中的图形进行检测，得到图形检测结果。具体的，将第一目标图片输入图形(圆形、矩形、三角形等)函数，通过霍夫变换得出所有基础图形，即得到了图形检测结果。例如，如图8所示，得到了待处理图片中包含了圆形、扇形、矩形及多边形等。其中，图形函数为可以对圆形、矩形、三角形等基础图形进行识别的函数。然后，对图形检测结果中的图形进行垃圾图形清洗，目的是移除不可还原的图形。垃圾图形的清洗步骤如下：对图形检测结果中图形内的像素点进行采样抽取，若颜色相同，则为纯色填充，若颜色符合线性变换，则为渐变填充，否则，视为不可还原的图形，将不可还原的图形移除，即不进行后续计算属性信息等步骤。

S244c，对图形检测结果计算属性信息，得到图形检测结果的属性信息。

在得到图形检测结果之后，计算每一个图形检测结果的属性信息。具体的，计算图形检测结果所对应的坐标、宽高、图形类型、图形颜色、路径集合、半径、圆角等信息。其中，路径集合指的是创建图形的路径。

S244d，根据图形检测结果及图形检测结果的属性信息创建图形图层实例。

具体的，在得到了图形检测结果所对应的坐标、宽高、图形类型、图形颜色、路径集合、半径、圆角等信息之后，就可以对待处理图片中的图形进行重绘，进而创建图形图层实例。在对基础图形(圆形、矩形、三角形等)进行重绘创建图形图层实例的时候，根据图形检测结果所对应的属性信息直接调用第三方设计软件的API(Application ProgrammingInterface,应用程序编程接口)进行绘制。而对于多边形等复杂图形的绘制时，根据图形检测结果所对应的属性信息采用SVG的path进行绘制。

本申请实施例中，对待处理图片进行文本区域过滤之后，得到不含文本区域的第一目标图片。然后，进一步对第一目标图片中的图形进行检测，得到图形形状及图形的属性信息。根据图形形状及图形的属性信息进行重绘创建图形图层实例。首先进行文本区域过滤，就将待处理图片中已经创建文本图层的文本区域进行去除，减少了进行图形检测时候的噪音，加快了图形检测的效率，也同时提高了图形检测的准确率。

在一个实施例中，S244a，对待处理图片进行文本区域过滤，得到第一目标图片，包括：

获取待处理图片中文本区域的边界色；

根据文本区域的边界色对文本区域进行颜色填充，得到第一目标图片。

具体的，第一目标图片为对图5中方框内的文本区域，都采用该文本区域的边界色进行颜色填充，将文本区域进行覆盖。即第一目标图片中不含文本区域。例如对4个“+关注”文本区域外围的圆角矩形，采用该文本区域的边界色(纯白色)对“+关注”文字区域进行颜色填充(纯白色填充)。同理，对其他文本区域采用同样的方式进行颜色填充，就得到了第一目标图片。将文本区域进行颜色填充是为了避免将包含文本区域的图形作为复杂图形进行剔除。因为图形检测无法对复杂图形进行处理，所以复杂图形只能在后续图像识别时才能进行处理。

本申请实施例中，采用文本区域的边界色来对文本区域进行颜色填充，实现了将待处理图片中已经创建文本图层的文本区域进行去除，减少了进行后续图形及图像检测时候的噪音，加快了图层创建的效率，也同时提高了图层创建的准确率。且采用文本区域的边界色来对文本区域进行颜色填充，避免了将包含文本区域的可还原图形作为垃圾图形进行清洗，就增加了后续将可还原图形作为图像进行处理的任务量，且图像处理的方式显然是比图形处理的方式更加复杂，就把简单的处理过程复杂化，降低了处理效率。

在一个实施例中，如图8所示，S246，对待处理图片进行图像图层识别得到图像图层实例，包括：

S246a，对第一目标图片进行图形区域过滤，得到第二目标图片。

第一目标图片为对待处理图片进行文本区域过滤所得到的，不包含文本区域。对第一目标图片再进行图形区域过滤，就是把第一目标图片中所包含的图形区域进行去除得到第二目标图片，第二目标图片不包含图形区域。

具体的，对第一目标图片进行图形区域过滤的方法和对待处理图片进行文本区域过滤的方法相同。文本区域过滤的过程指的是获取待处理图片中文本区域的边界色，根据文本区域的边界色对文本区域进行颜色填充，从而得到第一目标图片。相应的，图形区域过滤的过程指的是获取第一目标图片中图形区域的边界色，根据图形区域的边界色对图形区域进行颜色填充，从而得到第二目标图片。

S246b，对第二目标图片进行图像分割，得到图像分割结果。

其中，第二目标图片中既不包括文本区域，也不包括图形区域，仅包括复杂图像区域及垃圾图像清洗后的不可还原图形区域，即包括待处理图片中除去文本区域、图形区域之外的图像区域。对这类区域主要采用图像分割方法进行处理，例如采用抠图方法进行处理，得到图像分割结果。具体的，采用边缘裁切来对第二目标图片中的每一个图像区域进行抠图。例如，可以使用分水岭算法来对第二目标图片中的每一个图像区域的边缘进行裁切，以实现抠图输出新的图片文件。此处对第二目标图片中的独立图块实现抠图之后，每一个独立的图像区域就对应输出一个图片文件，例如可以是保存为JPEG或PNG格式的图片，且包括在固定的路径下以便后续创建图像图层实例的时候进行调用。例如，在图5中单独的图像区域指的就是头像。这些所输出的图片文件就是图像分割结果。其中，分水岭算法是一种图像区域分割法，在分割的过程中，会把跟临近像素间的相似性作为重要的参考依据，从而将在空间位置上相近并且灰度值相近的像素点互相连接起来构成一个封闭的轮廓。分水岭算法常用的操作步骤：彩色图像灰度化，然后再求梯度图，最后在梯度图的基础上进行分水岭算法，求得分段图像的边缘线。

S246c，对图像分割结果计算属性信息，得到图像分割结果的属性信息。

在对第二目标图片进行图像分割，得到图像分割结果之后，计算图像分割结果的属性信息。此处的属性信息包括对应的坐标、宽高及图片路径等信息。其中，图片路径指的是经过抠图后生成的图片文件的地址。

S246d，根据图像分割结果及图像分割结果的属性信息创建图像图层实例。

在得到了第二目标图片中的图像分割结果，并得到了图像分割结果的属性信息之后，就可以根据这两者来创建图像图层实例，即对待处理图片中除去文本区域和图像区域之外的图像区域进行绘制，对每一个抠图所得到的图片文件根据对应的属性信息进行绘制，就得到了一个图像图层实例。

本申请实例中，对第一目标图片中的图形区域进行过滤，得到第二目标图片。第二目标图片中既不包括文本区域，也不包括图形区域，仅包括待处理图片中除去文本区域、图形区域之外的图像区域。这样在对第二目标图片进行图像分割的时候，就避免了文本区域和图形区域所带来的噪音。直接将第二目标图片中的每一个单独的图像区域进行抠图得到图片文件，保存在固定的路径下。因此，在创建图像图层实例的时候，就可以直接在该路径下调用图像文件，再根据该图像文件对应的属性信息，就可以创建相应的图像图层实例，从而实现了对待处理图片进行图层还原。

在一个实施例中，如图9所示，S248根据文本图层实例、图形图层实例及图像图层实例创建组图层实例，由组图层实例构造图层树，包括：

S248a，对文本图层实例、图形图层实例及图像图层实例进行包含关系分析得到包含关系分析结果。

在对待处理图片进行图层识别之后，得到了文本图层实例、图形图层实例及图像图层实例。这些图层实例之间存在包含关系，此处的包含关系也可以叫嵌套关系。如图10所示，“+关注”为一个文本图层实例，“+关注”外围嵌套的圆角矩形框为一个图形图层实例，该图形图层实例与该文本图层实例之间存在嵌套关系，即该图形图层实例包含该文本图层实例。同理，对待处理图片中包含的所有图层实例依次进行包含关系分析，得到包含关系分析结果。

S248b，根据包含关系分析结果获取具有包含关系的图层实例，由具有包含关系的图层实例创建组图层实例。

在对待处理图片中包含的所有图层实例依次进行包含关系分析，得到包含关系分析结果之后，从包含关系分析结果中获取具有包含关系的图层实例。具体的，可以从图层实例中的任意一图层实例开始，一步一步向下获取，获取该图层实例所包含的图层实例，直到某个图层实例向下没有包含的图层实例为止。再从该图层实例开始一步一步向上获取，直到某个图层实例向上没有被包含的图层实例为止。如图10所示，“+关注”为一个文本图层实例，“+关注”外围嵌套的圆角矩形框为一个图形图层实例，该图形图层实例与该文本图层实例之间存在嵌套关系，即该图形图层实例包含该文本图层实例。再从关系分析结果中进一步获取包含“+关注”外围嵌套的圆角矩形框对应的图形图层实例的图层实例，因为“+关注”文本图层实例向下不包括图层实例，所以一步一步向上获取，直到某个图层实例向上没有被包含的图层实例为止。这样，与“+关注”文本图层实例具有包含和被包含关系的所有图层实例，就构成了一个组图层实例。在得到了一个组图层实例之后，将出现在该组图层实例中的图层实例从所有的图层实例中进行排除。从而对排除后的图层实例依照相同的方法来构建组图层实例，再得到下一个组图层实例之后，将出现在该组图层实例中的图层实例进行排除，继续构建下一个组图层实例。如此循环，直到将所有的图层实例都构建了组图层实例。

S248c，由组图层实例构造图层树。

由上述所得到的所有的组图层实例构造图层树。同一个组图层实例中的图层实例都具有包含和被包含关系。由组图层实例所构成的图层树直观地表示了待处理图片的图层结构。如图所示，

本申请实施例中，首先，对待处理图片所包含的图层实例梳理相互之间的包含关系，然后根据包含关系创建组图层实例，组图层实例中的图层实例之间具有包含和被包含关系。这样，就将待处理图片所识别出的杂乱无章的图层实例，根据包含关系整理出清晰的图层目录，该图层目录即为图层树的一种表现形式。图层目录就像文件夹目录一样，能清晰直观地表示待处理图片的图层结构。构造图层树之后，根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。从而，设计师就可以对该设计稿图片中的图层实例进行二次编辑。

在一个实施例中，S248b，根据包含关系分析结果获取具有包含关系的图层实例，由具有包含关系的图层实例创建组图层实例，包括：

对文本图层实例、图形图层实例及图像图层实例按照面积大小进行排序得到排序结果；

从排序结果中按照面积从小到大依次获取对应的图层实例作为父节点图层实例，根据包含关系分析结果获取父节点图层实例所包含的图层实例集合；

将父节点图层实例所包含的图层实例集合作为子节点插入至父节点图层实例，得到组图层实例。

具体的，根据包含关系分析结果获取具有包含关系的图层实例，由具有包含关系的图层实例创建组图层实例的时候，可以先对文本图层实例、图形图层实例及图像图层实例按照面积大小进行排序得到排序结果。此处，可以按照面积依次从小到大来对图层实例进行排序，也可以按照面积依次从大到小来对图层实例进行排序，得到图层实例的排序结果。

然后，从排序结果中按照面积从小到大依次获取对应的图层实例作为父节点图层实例，根据包含关系分析结果获取父节点图层实例所包含的图层实例集合。例如，按照面积从小到大依次获取图层实例，获取到“+关注”这个文本图层实例，将“+关注”这个文本图层实例作为父节点图层实例，根据包含关系分析结果获取父节点图层实例所包含的图层实例集合。显然“+关注”这个文本图层实例下并不包含图层实例。

继续按照面积从小到大获取图层实例，例如，获取到“+关注”外围嵌套的圆角矩形框这个图形图层实例，那么将该图形图层实例作为父节点图层实例，根据包含关系分析结果获取该父节点图层实例所包含的图层实例集合。显然该父节点图层实例下包含“+关注”这个文本图层实例。将父节点图层实例所包含的图层实例集合作为子节点插入至父节点图层实例，得到组图层实例。即将“+关注”这个文本图层实例作为子节点插入至“+关注”外围嵌套的圆角矩形框这个图形图层实例，得到组图层实例，并将“+关注”外围嵌套的圆角矩形框这个图形图层实例的坐标和宽高这两个属性信息赋值给该组图层实例，作为该组图层实例的坐标和宽高。

继续按照面积从小到大获取图层实例，将获取到的图层实例作为父节点图层实例，根据包含关系分析结果获取父节点图层实例所包含的图层实例集合。将父节点图层实例所包含的图层实例集合作为子节点插入至父节点图层实例，得到组图层实例，将父节点图层实例的坐标和宽高这两个属性信息赋值给该组图层实例，作为该组图层实例的坐标和宽高。其中，父节点图层实例所包含的图层实例集合中图层实例的数目可以为一个或多个。

若获取到某个图层实例作为父节点图层实例，该父节点图层实例包含一个组图层实例，那么就将该组图层实例作为子节点插入至父节点图层实例，得到新的组图层实例，将父节点图层实例的坐标和宽高这两个属性信息赋值给该新的组图层实例，作为该新的组图层实例的坐标和宽高。其中，该父节点图层实例所包含的图层实例集合中图层实例的数目可以为两个或两个以上。

本申请实施例中，从排序结果中按照面积从小到大依次获取对应的图层实例作为父节点图层实例，这样就不会漏掉任何图层实例。再根据包含关系分析结果获取父节点图层实例所包含的图层实例集合。将父节点图层实例所包含的图层实例集合作为子节点插入至父节点图层实例，如此逐级得到组图层实例。

在一个实施例中，如图11所示，在S260根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片之后，包括：

S280，对具有图层信息的设计稿图片的图层进行编辑，得到新的设计稿图片。

本申请实施例中，经过对待处理图片中的文字信息、图形信息及图像信息分别进行图层识别，得到文本图层实例、图形图层实例及图像图层实例。再由文本图层实例、图形图层实例及图像图层实例构造图层树，根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。此时，设计师就可以直接对具有图层信息的设计稿图片进行编辑，具体的，设计师可以对该设计稿图片中的任意一层图层实例进行修改、替换或删除等操作，得到新的设计稿图片。

传统方法中，对于网上的JPEG格式、PNG格式图片素材，该格式的图片不包含图层信息，所以设计师往往需要手工对网上的图片素材进行处理，才能还原为设计稿中的图层，这其中耗费的工作量十分巨大。或者采用微软提供的sketch2Code平台，通过AI(Artificial Intelligence，人工智能)对用户手绘的UI(User Interface，用户界面)草稿进行分析与识别，最终转成代码。但是sketch2Code平台只能对手绘设计稿进行识别，且还原对象为代码，无法供设计师复用。并且该sketch2Code平台采用AI技术对手绘设计稿进行识别，这就需要依赖大量人工标注的数据来训练出AI模型来实现AI技术。人工标注的数据比较有限，所以训练处的AI模型适用能力有限，不利用扩展，且人工标注成本太高。

在一个实施例中，如图12所示，提供了一种具体实施例中的图层还原方法，该方法步骤如下：

首先，结合图13所示，为一个实施例中图片转设计稿工具的首页的界面示意图，该图片转设计稿工具可以实现上述图层还原方法。用户进入首页点击右上角上传按钮上传素材图片，进入预览页显示图片预览，用户对目标区域进行框选，该目标区域对应的图片即为原始图片。紧接着用户点击转换按钮，图片转设计稿工具对原始图片进行图层识别构造图层树，得到图层树之后进入工具页，如图14所示。

其中，图片转设计稿工具对原始图片进行图层识别构造图层树的过程包括：将原始图片输入图片转设计稿工具进行文本图层识别，具体的，对原始图片进行文本区域检测得到文本区域之后，对文本区域进行文字内容识别OCR(Optical Character Recognition，光学字符识别)识别出文本区域中的文字。再计算文字的属性信息，文字的属性信息包括对应的坐标、宽高、内容、颜色、大小等信息。进而，根据所识别出的文字及文字的属性信息创建文本图层实例。

在创建文本图层实例之后，进入图形图层识别过程，具体的，根据文本区域对待处理图片进行文本区域过滤得到第一目标图片，对第一目标图片进行图形检测，得到图形检测结果即为矩形、圆形或多边形等。进一步对图形检测结果计算属性信息，得到图形检测结果的属性信息。图形检测结果的属性信息包括坐标、宽高、图形类型、图形颜色、路径集合、半径、圆角等信息。其中，路径集合指的是创建图形的路径。进而，根据所识别出的图形检测结果及图形检测结果的属性信息创建图形图层实例。

在创建图形图层实例之后，进入图像图层识别过程，具体的，对第一目标图片进行图形区域过滤得到第二目标图片，对第二目标图片进行图像分割，得到图像分割结果。可以采用抠图方法进行图像分割，包括使用分水岭算法来对第二目标图片中的每一个单独图像区域的边缘进行裁切，以实现抠图输出新的图片文件。将所输出的图片文件保存为JPEG或PNG格式的图片，且包括在固定的路径下以便后续创建图像图层实例的时候进行调用。紧接着计算抠图所得到的图片文件的属性信息，此处的属性信息包括对应的坐标、宽高及图片路径等信息。其中，图片路径指的是经过抠图后生成的图片文件的地址。对每一个抠图所得到的图片文件根据对应的属性信息进行绘制，就得到了一个图像图层实例。

在得到了文本图层实例、图形图层实例及图像图层实例之后，进入构造图层树的过程。具体的，对文本图层实例、图形图层实例及图像图层实例进行包含关系分析得到包含关系分析结果。进一步对文本图层实例、图形图层实例及图像图层实例按照面积大小进行排序得到排序结果，再从排序结果中按照面积从小到大依次获取对应的图层实例作为父节点图层实例。结合包含关系分析结果判断父节点图层实例中是否存在被包含的图层，若是则获取父节点图层实例所包含的图层实例集合，将父节点图层实例所包含的图层实例集合作为子节点插入至父节点图层实例，得到组图层实例。根据组图层实例构造图层树。

得到了原始图片的图层树之后，即跳转至如图14所示的工具页。在该工具页中左侧栏展示图层结构即为原始图片的图层树，右侧栏显示单个图层的属性信息。当用户在工具页的右侧栏选择导出全部图层，那么此时遍历图层树调用设计软件的接口对原始图片进行图层还原，得到具有所有图层信息的设计稿图片，如图14A所示。当用户在工具页的左侧栏选中某个图层(例如选定最左边的“+关注”这个文本图层实例)，并在右侧栏选择导出选中图层，那么此时调用第三方设计软件的接口对原始图片的该图层进行图层还原，得到该图层所对应的设计稿图片，如图14B所示。

本申请实施例中，首先，直接将所拍摄的图片或从网上下载的图片(不包含图层信息)输入至图片转设计稿工具中进行处理；然后，采用方框线从所输入的图片中选定目标区域，点击转换按钮即可通过该图片转设计稿工具实现对目标区域的图片创建图层树，最后，在工具页选择导出图层即可实现图层还原得到具有图层信息的设计稿图片。解决了传统方法中设计师在使用所拍摄的图片或网上的图片素材的时候，因为网上的图片素材很多都是JPEG格式、PNG格式，该格式的图片不包含图层信息，所以设计师往往需要手工对网上的图片素材进行处理，才能还原为UI设计稿中的图层，耗时耗力的问题。本申请实施例中的方法，完全实现了自动化进行图层还原得到设计稿，大大提高了图层还原的效率，方便后续设计师对设计稿进行编辑。

在一个实施例中，如图15所示，提供了一种图层还原装置300包括：待处理图片获取模块320、图层识别模块340及图层还原模块360。其中，

待处理图片获取模块320，用于获取待处理图片，待处理图片中未包含图层信息；

图层识别模块340，用于对待处理图片进行图层识别构造图层树；

图层还原模块360，用于根据图层树对待处理图片进行图层还原，得到具有图层信息的设计稿图片。

在一个实施例中，如图16所示，图层识别模块340包括：

文本图层识别单元342，用于对待处理图片进行文本图层识别得到文本图层实例；

图形图层识别单元344，用于对待处理图片进行图形图层识别得到图形图层实例；

图像图层实例单元346，用于对待处理图片进行图像图层识别得到图像图层实例；

图层树构造单元348，用于根据文本图层实例、图形图层实例及图像图层实例创建组图层实例，由组图层实例构造图层树。

在一个实施例中，如图17所示，文本图层识别单元342包括：

文本区域检测单元342a，用于对待处理图片进行文本区域检测得到文本区域；

文本内容识别单元342b，用于对文本区域进行文本内容识别得到文本内容识别结果；

第一属性信息计算单元342c，用于对文本内容识别结果计算属性信息，得到文本内容识别结果的属性信息；

文本图层实例创建单元342d，用于根据文本内容识别结果及文本内容识别结果的属性信息创建文本图层实例。

在一个实施例中，如图18所示，图形图层识别单元344包括：

文本区域过滤单元344a，用于对待处理图片进行文本区域过滤，得到第一目标图片；

图形检测单元344b，用于对第一目标图片进行图形检测，得到图形检测结果；

第二属性信息计算单元344c，用于对图形检测结果计算属性信息，得到图形检测结果的属性信息；

图形图层实例创建单元344d，用于根据图形检测结果及图形检测结果的属性信息创建图形图层实例。

在一个实施例中，文本区域过滤单元344a，还用于获取待处理图片中文本区域的边界色；根据文本区域的边界色对文本区域进行颜色填充，得到第一目标图片。

在一个实施例中，如图19所示，图像图层实例单元346包括：

图形区域过滤单元346a，用于对第一目标图片进行图形区域过滤，得到第二目标图片；

图像分割单元346b，用于对第二目标图片进行图像分割，得到图像分割结果；

第三属性信息计算单元346c，用于对图像分割结果计算属性信息，得到图像分割结果的属性信息；

图像图层实例创建单元346d，用于根据图像分割结果及图像分割结果的属性信息创建图像图层实例。

在一个实施例中，如图20所示，图层树构造单元348包括：

包含关系分析单元348a，用于对文本图层实例、图形图层实例及图像图层实例进行包含关系分析得到包含关系分析结果；

组图层实例创建单元348b，用于根据包含关系分析结果获取具有包含关系的图层实例，由具有包含关系的图层实例创建组图层实例；

图层树构造单元348c，用于由组图层实例构造图层树。

在一个实施例中，组图层实例创建单元348b还用于对文本图层实例、图形图层实例及图像图层实例按照面积大小进行排序得到排序结果；从排序结果中按照面积从小到大依次获取对应的图层实例作为父节点图层实例，根据包含关系分析结果获取父节点图层实例所包含的图层实例集合；将父节点图层实例所包含的图层实例集合作为子节点插入至父节点图层实例，得到组图层实例。

在一个实施例中，如图21所示，提供了一种图层还原装置300还包括：

新的设计稿图片生成模块380，用于对具有图层信息的设计稿图片的图层进行编辑，得到新的设计稿图片。

应该理解的是，虽然上述流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，上述流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

图22示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端110。如图22所示，该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置、显示屏、摄像头、声音采集装置及扬声器。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现上述图层还原方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行上述图层还原方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图22中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，本申请提供的图层还原装置可以实现为一种计算机程序的形式，计算机程序可在如图22所示的计算机设备上运行。计算机设备的存储器中可存储组成该图层还原装置的各个程序模块，比如，图15所示的待处理图片获取模块320、图层识别模块340及图层还原模块360。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的图层还原方法中的步骤。

例如，图22所示的计算机设备可以通过如图15所示的图层还原装置中的待处理图片获取模块320执行步骤S220。计算机设备可通过图层识别模块340执行步骤S240。计算机设备可通过图层还原模块360执行步骤S260。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，计算机程序被处理器执行时，使得处理器执行上述图层还原方法的步骤。此处图层还原方法的步骤可以是上述各个实施例的图层还原方法中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，计算机程序被处理器执行时，使得处理器执行上述图层还原方法的步骤。此处图层还原方法的步骤可以是上述各个实施例的图层还原方法中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (12)

1.一种图层还原方法，包括：

获取待处理图片，所述待处理图片中未包含图层信息；

对所述待处理图片进行图层识别构造图层树；

根据所述图层树对所述待处理图片进行图层还原，得到具有图层信息的设计稿图片。

2.根据权利要求1所述的方法，其特征在于，所述对所述待处理图片进行图层识别构造图层树，包括：

对所述待处理图片进行文本图层识别得到文本图层实例；

对所述待处理图片进行图形图层识别得到图形图层实例；

对所述待处理图片进行图像图层识别得到图像图层实例；

根据所述文本图层实例、所述图形图层实例及所述图像图层实例创建组图层实例，由所述组图层实例构造图层树。

3.根据权利要求2所述的方法，其特征在于，所述对所述待处理图片进行文本图层识别得到文本图层实例，包括：

对所述待处理图片进行文本区域检测得到文本区域；

对所述文本区域进行文本内容识别得到文本内容识别结果；

对所述文本内容识别结果计算属性信息，得到所述文本内容识别结果的属性信息；

根据所述文本内容识别结果及所述文本内容识别结果的属性信息创建文本图层实例。

4.根据权利要求3所述的方法，其特征在于，所述对所述待处理图片进行图形图层识别得到图形图层实例，包括：

对所述待处理图片进行文本区域过滤，得到第一目标图片；

对所述第一目标图片进行图形检测，得到图形检测结果；

对所述图形检测结果计算属性信息，得到所述图形检测结果的属性信息；

根据所述图形检测结果及所述图形检测结果的属性信息创建图形图层实例。

5.根据权利要求4所述的方法，其特征在于，所述对所述待处理图片进行文本区域过滤，得到第一目标图片，包括：

获取所述待处理图片中文本区域的边界色；

根据所述文本区域的边界色对所述文本区域进行颜色填充，得到第一目标图片。

6.根据权利要求5所述的方法，其特征在于，所述对所述待处理图片进行图像图层识别得到图像图层实例，包括：

对所述第一目标图片进行图形区域过滤，得到第二目标图片；

对所述第二目标图片进行图像分割，得到图像分割结果；

对所述图像分割结果计算属性信息，得到所述图像分割结果的属性信息；

根据所述图像分割结果及所述图像分割结果的属性信息创建图像图层实例。

7.根据权利要求2所述的方法，其特征在于，所述根据所述文本图层实例、所述图形图层实例及所述图像图层实例创建组图层实例，由所述组图层实例构造图层树，包括：

对所述文本图层实例、所述图形图层实例及所述图像图层实例进行包含关系分析得到包含关系分析结果；

根据所述包含关系分析结果获取具有包含关系的图层实例，由所述具有包含关系的图层实例创建组图层实例；

由所述组图层实例构造图层树。

8.根据权利要求7所述的方法，其特征在于，所述根据所述包含关系分析结果获取具有包含关系的图层实例，由所述具有包含关系的图层实例创建组图层实例，包括：

对所述文本图层实例、所述图形图层实例及所述图像图层实例按照面积大小进行排序得到排序结果；

从所述排序结果中按照面积从小到大依次获取对应的图层实例作为父节点图层实例，根据所述包含关系分析结果获取所述父节点图层实例所包含的图层实例集合；

将所述父节点图层实例所包含的图层实例集合作为子节点插入至所述父节点图层实例，得到组图层实例。

9.根据权利要求1所述的方法，其特征在于，在所述根据所述图层树对所述待处理图片进行图层还原，得到具有图层信息的设计稿图片之后，包括：

对所述具有图层信息的设计稿图片的图层进行编辑，得到新的设计稿图片。

10.一种图层还原装置，其特征在于，所述装置包括：

待处理图片获取模块，用于获取待处理图片，所述待处理图片中未包含图层信息；

图层识别模块，用于对所述待处理图片进行图层识别构造图层树；

图层还原模块，用于根据所述图层树对所述待处理图片进行图层还原，得到具有图层信息的设计稿图片。

11.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1至9中任一项所述方法的步骤。

12.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1至9中任一项所述方法的步骤。

Images