代码生成方法、装置、服务器及计算机可读介质与流程

本申请实施例涉及计算机技术领域，具体涉及代码生成方法、装置、服务器及计算机可读介质。

背景技术：

用户界面(userinterface，ui)一般可以认为是对软件或网页的人机交互、操作逻辑、界面美观的整体设计。优秀的用户界面不仅可以让软件或网页变得有个性有品位，还可以让软件或网页的操作更加舒适、简单、自然，进而充分体现软件或网页的定位和特点等等。

在软件或网页的开发过程中，通常，需要先由视觉设计师对用户界面进行设计，形成图片源文件(即ui设计稿)，再由前端工程师按照用户界面设计稿完成从用户界面设计稿到代码的还原工作。该还原工作中对用户界面设计稿的解析工作尤为重要，往往需要消耗数小时甚至数天的时间，效率低，且对前端工程师的技能要求较高。

技术实现要素：

本申请实施例提出了代码生成方法、装置、服务器及计算机可读介质，以解决现有技术中对图片源文件的解析工作效率低，且对前端工程师的技能要求较高的问题。

第一方面，本申请实施例提供了一种代码生成方法，应用于服务器，该方法包括：获取待处理的图片源文件；提取图片源文件中的各元素和各元素的属性信息；对属性信息进行解析，生成元素间的位置关系信息；基于位置关系信息，对各元素进行布局；基于布局结果和属性信息，生成用于还原图片的程序代码。

在一些实施例中，属性信息还包括元素位置信息和元素尺寸信息；以及对属性信息进行解析，生成元素间的位置关系信息，包括：基于元素位置信息和元素尺寸信息，生成各元素对应的盒子模型信息；基于盒子模型信息、元素位置信息和元素尺寸信息，生成元素间的位置关系信息，其中，位置关系信息包括元素对应的盒子模型间的距离。

在一些实施例中，基于位置关系信息，确定每行待布局的元素的列数，包括：基于位置关系信息，确定每行待布局的元素是否存在重合关系，其中，重合关系包括全部重合关系和局部重合关系；将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。

在一些实施例中，属性信息包括元素覆盖顺序；以及在基于位置关系信息，对各元素进行布局之后，方法还包括：按照元素覆盖顺序，对各元素的布局结果进行调整。

在一些实施例中，提取图片源文件中的各元素和各元素的属性信息，包括：对图片源文件进行预处理，其中，预处理包括以下至少一项：对图片源文件中的各元素进行检查、对图片源文件中的各元素进行存储；提取各元素，并从图片源文件中提取各元素的属性信息。

在一些实施例中，预处理还包括存储图片源文件对应的待还原图片；以及在生成用于还原图片的程序代码之后，该方法还包括：运行用于还原图片的程序代码，生成还原后图片；将还原后图片与待还原图片进行对比，确定还原后图片的还原度；基于还原度与预设数值的比较，确定用于还原图片的程序代码是否合格。

在一些实施例中，在生成还原后图片之后，该方法还包括：确定还原后图片与待还原图片的像素差值。

在一些实施例中，获取待处理的图片源文件，包括：响应于接收到存储服务器发送的解析任务消息，从存储服务器中获取待处理的图片源文件；以及在基于布局结果和属性信息，生成用于还原图片的程序代码之后，该方法还包括：将用于还原图片的程序代码发送至存储服务器。

在一些实施例中，该方法还包括：按照预设维度对图片源文件的处理过程进行实时监控，其中，预设维度包括以下至少一项：异常状态、还原成功率、耗时信息。

第二方面，本申请实施例提供了一种代码生成装置，应用于服务器，该装置包括：获取单元，被配置成获取待处理的图片源文件；提取单元，被配置成提取图片源文件中的各元素和各元素的属性信息；解析单元，被配置成对属性信息进行解析，生成元素间的位置关系信息；布局单元，被配置成基于位置关系信息，对各元素进行布局；代码生成单元，被配置成基于布局结果和属性信息，生成用于还原图片的程序代码。

在一些实施例中，属性信息还包括元素位置信息和元素尺寸信息；以及解析单元，包括：第一生成模块，被配置成基于元素位置信息和元素尺寸信息，生成各元素对应的盒子模型信息；第二生成模块，被配置成基于盒子模型信息、元素位置信息和元素尺寸信息，生成元素间的位置关系信息，其中，位置关系信息包括元素对应的盒子模型间的距离。

在一些实施例中，布局模块，包括：第一确定模块，被配置成基于位置关系信息，确定每行待布局的元素是否存在重合关系，其中，重合关系包括全部重合关系和局部重合关系；第二确定模块，被配置成将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。

在一些实施例中，属性信息包括元素覆盖顺序；以及该装置还包括：调整单元，被配置成按照元素覆盖顺序，对各元素的布局结果进行调整。

在一些实施例中，提取单元进一步被配置成：对图片源文件进行预处理，其中，预处理包括以下至少一项：对图片源文件中的各元素进行检查、对图片源文件中的各元素进行存储；提取各元素，并从图片源文件中提取各元素的属性信息。

在一些实施例中，预处理还包括存储图片源文件对应的待还原图片；以及该装置还包括：运行单元，被配置成运行用于还原图片的程序代码，生成还原后图片；第一确定单元，被配置成将还原后图片与待还原图片进行对比，确定还原后图片的还原度；第二确定单元，被配置成基于还原度与预设数值的比较，确定用于还原图片的程序代码是否合格。

在一些实施例中，该装置还包括：第三确定单元，被配置成确定还原后图片与待还原图片的像素差值。

在一些实施例中，获取单元进一步被配置成：响应于接收到存储服务器发送的解析任务消息，从存储服务器中获取待处理的图片源文件；以及该装置还包括：存储单元，被配置成将用于还原图片的程序代码发送至存储服务器。

在一些实施例中，该装置还包括：监控单元，被配置成按照预设维度对图片源文件的处理过程进行实时监控，其中，预设维度包括以下至少一项：异常状态、还原成功率、耗时信息。

第三方面，本申请实施例提供了一种服务器，包括：一个或多个处理器；存储装置，其上存储有一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如上述第一方面中任一实施例的方法。

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

本申请实施例提供的代码生成方法和装置，在获取到待处理的图片源文件之后，可以提取图片源文件中的各元素和各元素的属性信息；而后，可以对属性信息进行解析，生成元素间的位置关系信息，以便基于位置关系信息，对各元素进行布局；最后，基于布局结果和属性信息，生成用于还原图片的程序代码。从而，可以无需人工完成对图片源文件的解析工作，减少了前端工程师的工作量、降低了前端工程师的技能要求；同时，提高了图片源文件的解析速度，提高了网页开发效率。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是根据本申请的代码生成方法的一个实施例的流程图；

图2是根据本申请的代码生成方法的又一个实施例的流程图；

图3是本申请中执行代码生成方法的服务器与存储服务器之间的交互示意图；

图4是根据本申请的代码生成装置的一个实施例的结构示意图；

图5是适于用来实现本申请实施例的服务器的计算机系统的结构示意图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

请参考图1，其示出了根据本申请的代码生成方法的一个实施例的流程100。该代码生成方法，可以应用于服务器，包括以下步骤：

步骤101，获取待处理的图片源文件。

在本实施例中，代码生成方法的执行主体(例如服务器)可以获取待处理的图片源文件。其中，上述图片源文件可以是用于用户界面的用户界面设计稿，也可以广告设计稿等，本发明对图片的应用场景不做限定。作为示例，上述图片源文件可以是sketch(一种矢量设计工具)源文件或photoshop源文件等。

实践中，图片源文件中可以包含多种元素。例如，切片、图层、矢量图、文字等。此处，对图片源文件的类型、版本、内容、容量等不作具体限制。

在本实施例中，上述待处理的图片源文件中的元素可以包括以下至少一项：图层、矢量图、切片、文本。

在本实施例的一些可选的实现方式中，上述执行主体可以与存储服务器通信连接。其中，上述存储服务器可以用于存储当前待进行处理的一个或多个图片源文件，也可以用于存储上述执行主体处理后的用于还原图片的程序代码。响应于接收到存储服务器发送的解析任务消息，上述执行主体可以从上述存储服务器中获取待处理的图片源文件。

步骤102，提取图片源文件中的各元素和各元素的属性信息。

在本实施例中，上述执行主体可以提取上述图片源文件中的各元素和上述各元素的属性信息。需要说明的是，上述属性信息可以包括但不限于：元素位置信息、元素尺寸信息、索引信息、样式信息、文本信息等。此处对各元素的属性信息的种类和内容等不作具体限制。

此处，针对不同类型的图片源文件，可以采用不同的方式进行元素及属性信息的提取。作为示例，若图片源文件为sketch源文件，则可以通过预先编写的脚本以及现有的第三方工具(例如sketchtools)，按照sketch源文件的文档规范中的信息，对为sketch源文件中的各元素及各元素的属性信息进行提取。

在本实施例的一些可选的实现方式中，其中，上述属性信息可以包括元素覆盖顺序。上述元素覆盖顺序可以是上述图片源文件中的各元素依次从最底层到最上层的排列顺序。例如，待还原图片中包含两个图像元素。第二图像元素的一部分覆盖第一图像元素的部分区域。则元素覆盖顺序可以依次为第一图像元素、第二图像元素。

在上述实现方式中，上述执行主体可以通过如下步骤提取上述各元素和上述属性信息：第一步，可以对上述图片源文件进行预处理。其中，上述预处理包括以下至少一项：对上述图片源文件中的各元素进行检查、对上述图片源文件中的各元素进行存储。作为示例，可以通过预先编写的脚本按照sketch源文件的文档规范中的各元素的属性信息，对各元素中的切片元素、图层元素、矢量图元素等进行检查操作；可以通过第三方工具(如sketchtools)对各元素中的切片元素和矢量图元素进行存储操作。此外，上述预处理还可以包含对sketch源文件的版本升级操作，同时，也可以将sketch源文件导出为待还原图片以备后续使用，并将切片元素和矢量图元素导出为图片以备在后续生成程序代码时使用。需要说明的是，图片源文件中的图层元素在预处理操作中可以不作更改。第二步，提取上述各元素，并从上述图片源文件中提取上述各元素的属性信息。

步骤103，对属性信息进行解析，生成元素间的位置关系信息。

在本实施例中，由于属性信息中可以包括元素位置信息、元素尺寸信息等信息，因此，上述执行主体可以根据属性信息，计算元素间的位置关系，以生成位置关系信息。此处，位置关系信息可以用于指示元素间的相对位置。例如，位置关系信息可以包括元素间的相对距离。

作为示例，可以将终端界面的左上角坐标点作为坐标原点。将距离上述坐标原点最近的元素作为第一元素，将与上述第一元素临近的元素作为第二元素。而后，可以确定第二元素与第一元素的相对距离。上述距离可以包括横向距离和纵向距离。上述距离可以用坐标差值来表征。以此类推，可以确定各个相邻元素间的距离。从而确定出元素的位置关系。需要说明的是，此处的坐标原点不作具体限制，可以根据需要来设定。

步骤104，基于位置关系信息，对各元素进行布局。

在本实施例中，上述执行主体可以基于上述位置关系信息，对上述各元素进行布局。例如，可以进行一列布局、两列布局、多列布局等。

具体地，由于通过上述位置关系信息，可以确定元素间的相对位置。因此，利用该位置关系信息，可以确定出每行待布局的元素是否存在重合关系。上述重合关系可以包括全部重叠、局部重叠等。之后，上述执行主体可以将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为单独一列，统计每行待布局的元素的列数。最后，按照上述列数对上述各元素进行布局。

作为示例，图片源文件中包含的元素ui1、ui2、ui3、ui4、ui5。元素ui1和ui2位于纵坐标为y1的行，即纵坐标y1的行内包含ui1和ui2两个元素。元素ui3和ui4位于纵坐标为y2的行，即纵坐标y2的行内包含用ui3、ui4、ui5三个元素。此处，若基于位置关系信息，知元素ui1、ui2不存在重叠关系，则对于纵坐标为y1的行，可以进行两列布置，分别布置元素ui1和元素ui2。此外，若基于位置关系信息，知元素ui3、ui4存在重合关系，元素ui5与各元素均不重叠，则可以将元素ui3、ui4作为一列，将元素ui5作为单独的一列，对纵坐标为y2的行进行两列布置。其中一列布置元素ui3、ui4，另一列布置元素ui5。

在本实施例的一些可选的实现方式中，在得到布局结果后，还可以按照上述元素覆盖顺序，上述各元素的布局结果进行调整。从而，可以使元素的覆盖情况与待还原图片中的元素覆盖情况相匹配。此处，在对元素进行排列操作时，可以按照预设的渲染顺序进行排列操作。通常，预设的渲染顺序可以为从左上到右下的顺序，此处对渲染顺序不作具体限制。

步骤105，基于布局结果和属性信息，生成用于还原图片的程序代码。

在本实施例中，上述执行主体可以根据布局结果和上述属性信息，生成用于还原图片的程序代码。其中，布局结果可以包括各元素的元素位置信息、元素尺寸信息、位置关系信息、所在图层的次序等信息。上述属性信息可以包括元素尺寸信息、索引信息、样式信息、文本信息、颜色信息等等。

这里，用于还原图片的程序代码在运行后可以呈现有还原后图片。上述用于还原图片的程序代码可以是指定语言的代码。作为示例，用于还原图片的程序代码可以是html(hypertextmarkuplanguage，超级文本标记语言)代码。实践中，可以将元素转换为html代码中的标签。例如，若元素为图像，则标签为<img>。之后，可以将元素的属性信息转换为属性名称和属性值，添加至该元素对应的标签中。由此，生成用于还原图片的程序代码。

需要说明的是，上述执行主体可以仅自动生成与还原图片有关的代码，其余功能或事件的代码可基于现有技术的方法人工编写。

在本实施例的一些可选的实现方式中，在生成用于还原图片的程序代码之后，上述执行主体还可以执行如下步骤：

首先，运行上述用于还原图片的程序代码，从而生成还原后图片。

之后，可以将上述还原后图片与上述待还原图片进行对比，确定上述还原后图片的还原度。实践中，上述还原度可以用于表征还原后图片与上述待还原图片的相似程度。此处，上述还原度可以采用各种方式确定。作为示例，可以对两个图片相同位置的像素值进行匹配，将相匹配的位置的数量与图片像素点总数量的比值确定为还原度。需要说明的是，还原度的确定方式不限于上述示例，也可以按照预设的其他规则进行确定，此处不作限定。

最后，基于上述还原度与预设数值的比较，确定上述用于还原图片的程序代码是否合格。此处，若上述还原度不小于上述预设数值，可以确定上述用于还原图片的程序代码合格。反之，则可以确定不合格。实践中，在确定不合格后，上述执行主体还可以生成并返回报警信息。

在本实施例的一些可选的实现方式中，在运行上述用于还原图片的程序代码，生成还原后图片之后，上述执行主体还可以确定上述还原后图片与上述待还原图片的像素差值。此处，可以是rgb差值。实践中，可以使用将浏览器自带的能够支持像素差值计算的对象(例如canvas对象)来进行差值计算。也可以直接采用差分运算方式，生成上述还原后图片与上述待还原图片的差分图像。从而得到各像素点的像素差值。

在本实施例的一些可选的实现方式中，在生成用于还原图片的程序代码之后，上述执行主体还可以将上述用于还原图片的程序代码发送至存储服务器，以便用户调取和查看。这里，储存服务器可以用于存储待处理的图片源文件和处理后的用于还原图片的程序代码。

在本实施例的一些可选的实现方式中，上述执行主体对图片源文件的处理过程中，还可以按照预设维度对对图片源文件的处理进行实时监控。其中，上述预设维度可以包括以下至少一项：异常状态、还原成功率、耗时信息。作为示例，异常状态可以包括无法生成用于还原图片的程序代码、用于还原图片的程序代码生成耗时过长等。还原成功率可以是生成用于还原图片的程序代码的次数与所获取的待处理的图片源文件的总量的比值。耗时信息可以是从获取到图片源文件到生成用于还原图片的程序代码的总时长。

本申请的上述实施例提供的方法，在获取到待处理的图片源文件之后，可以提取上述图片源文件中的各元素和上述各元素的属性信息；而后，可以对上述属性信息进行解析，生成上述元素间的位置关系信息，以便基于上述位置关系信息，对上述各元素进行布局；最后，基于布局结果和上述属性信息，生成用于还原图片的程序代码。从而，可以无需人工完成对图片源文件的解析工作，减少了前端工程师的工作量、降低了前端工程师的技能要求；同时，提高了图片源文件的解析速度，提高了网页开发效率。

进一步参考图2，其示出了代码生成方法的又一个实施例的流程200。该代码生成方法的流程200。包括以下步骤：

步骤201，获取待处理的图片源文件。

在本实施例中，代码生成方法的执行主体(例如服务器)可以与存储服务器通信连接。其中，上述存储服务器可以用于存储当前待进行处理的一个或多个图片源文件，也可以用于存储上述执行主体处理后的用于还原图片的程序代码。响应于接收到存储服务器发送的解析任务消息，上述执行主体可以从上述存储服务器中获取待处理的图片源文件。

此处，上述待处理的图片源文件中的元素可以包括以下至少一项：图层、矢量图、切片、文本。

步骤202，提取图片源文件中的各元素和各元素的属性信息。

在本实施例中，上述执行主体可以通过如下步骤提取上述各元素和上述属性信息：

第一步，可以对上述图片源文件进行预处理。其中，上述预处理包括以下至少一项：对上述图片源文件中的各元素进行检查、对上述图片源文件中的各元素进行存储。作为示例，可以通过预先编写的脚本按照sketch源文件的文档规范中的各元素的属性信息，对各元素中的切片元素、图层元素、矢量图元素等进行检查操作；可以通过第三方工具(如sketchtools)对各元素中的切片元素和矢量图元素进行存储操作。此外，上述预处理还可以包含对sketch源文件的版本升级操作，同时，也可以将sketch源文件导出为待还原图片以备后续使用，并将切片元素和矢量图元素导出为图片以备在后续生成程序代码时使用。需要说明的是，图片源文件中的图层元素在预处理操作中可以不作更改。

第二步，提取上述各元素，并从上述图片源文件中提取上述各元素的属性信息。

需要说明的是，上述属性信息可以包含元素覆盖顺序。此外，还可以包含其他信息。例如，可以包括但不限于：元素位置信息、元素尺寸信息、索引信息、样式信息、文本信息等。此处对各元素的属性信息的种类和内容等不作具体限制。

步骤203，基于属性信息中的元素位置信息和元素尺寸信息，生成各元素对应的盒子模型信息。

在本实施例中，上述执行主体可以从各元素的属性信息中提取元素位置信息和元素尺寸信息。此处，元素位置信息可以包括元素的坐标。元素尺寸信息可以包括元素的宽和高。而后，可以基于所提取的元素位置信息和元素尺寸信息，生成各元素对应的盒子模型信息。

实践中，盒子模型是在网页设计中经常用到的css(cascadingstylesheets，层叠样式表)技术所使用的一种思维模型。盒子模型又称框模型(boxmodel)，其包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

在已知图片源文件中各元素的元素位置信息和元素尺寸信息的情况下，上述执行主体可以确定出各元素对应的盒子模型中的内边距、边框、外边距等信息，从而生成盒子模型信息。此处，盒子模型信息可以是用于指示盒子模型的代码。该代码中可以包含盒子模型中的各要素的值。

步骤204，基于盒子模型信息、元素位置信息和元素尺寸信息，生成元素间的位置关系信息。

在本实施例中，由于盒子模型信息中可以包括内边框的值、外边框的值等信息，在已知元素的元素尺寸信息的情况下，可以确定出各元素对应的盒子模型的尺寸。在已知各元素的元素位置信息的情况下，可以确定出各元素对应的盒子模型的位置关系。基于各元素对应的盒子模型的尺寸和位置，即可确定元素对应的盒子模型间的距离等信息。此处，位置关系信息可以所确定出的盒子模型间的距离等信息。

步骤205，基于位置关系信息，确定每行待布局的元素是否存在重合关系。

在本实施例中，由于通过上述位置关系信息，可以确定元素间的相对位置。因此，利用该位置关系信息，可以确定出每行待布局的元素是否存在重合关系。上述重合关系可以包括全部重合关系和局部重合关系。

步骤206，将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。

在本实施例中，上述执行主体可以将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为单独一列，统计每行待布局的元素的列数。最后，按照上述列数对上述各元素进行布局。

作为示例，图片源文件中包含的元素ui1、ui2、ui3、ui4、ui5。元素ui1和ui2位于纵坐标为y1的行，即纵坐标y1的行内包含ui1和ui2两个元素。元素ui3和ui4位于纵坐标为y2的行，即纵坐标y2的行内包含用ui3、ui4、ui5三个元素。此处，若基于位置关系信息，知元素ui1、ui2不存在重合关系，则对于纵坐标为y1的行，可以进行两列布置，分别布置元素ui1和元素ui2。此外，若基于位置关系信息，知元素ui3、ui4存在重合关系，元素ui5与各元素均不重叠，则可以将元素ui3、ui4作为一列，将元素ui5作为单独的一列，对纵坐标为y2的行进行两列布置。其中一列布置元素ui3、ui4，另一列布置元素ui5。

步骤207，按照元素覆盖顺序，对各元素的布局结果进行调整。

在本实施例中，上述执行主体可以按照元素覆盖顺序，对各元素的布局结果进行调整。从而，可以使元素的覆盖情况与待还原图片中的元素覆盖情况相匹配。

此处，在对元素进行排列操作时，可以按照预设的渲染顺序进行排列操作。通常，预设的渲染顺序可以为从左上到右下的顺序，此处对渲染顺序不作具体限制。

步骤208，基于布局结果和属性信息，生成用于还原图片的程序代码。

在本实施例中，在对布局结果进行调整之后，可以根据调整后的布局结果和上述属性信息，生成用于还原图片的程序代码。其中，调整后的布局结果可以包括各元素的元素位置信息、元素尺寸信息、位置关系信息、所在图层的次序等信息。上述属性信息可以包括元素尺寸信息、索引信息、样式信息、文本信息、颜色信息等等。

步骤209，将用于还原图片的程序代码发送至存储服务器。

在本实施例中，在生成用于还原图片的程序代码之后，上述执行主体还可以将上述用于还原图片的程序代码发送至存储服务器，以便用户调取和查看。这里，储存服务器可以用于存储待处理的图片源文件和处理后的用于还原图片的程序代码。

从图2中可以看出，与图1对应的实施例相比，本实施例中的代码生成方法的流程200涉及了生成盒子模型信息、利用盒子模型信息生成元素间的位置关系信息的步骤。由此，可以无需人工完成对图片源文件的解析工作，减少了前端工程师的工作量、降低了前端工程师的技能要求；同时，提高了图片源文件的解析速度，提高了网页开发效率。此外，还涉及了与存储服务器交互的步骤。由此，在软件或网页的开发过程中，视觉设计师和前端工程师可以并行作业，从整体上提高了软件或网页的开发效率。

继续参见图3，图3是根据本实施例执行代码生成方法的服务器与存储服务器之间的交互示意图。这里，执行代码生成方法的服务器可以称为解析服务器。

如图3所示，视觉设计工程师可以上传设计完成的图片源文件至存储服务器中。存储服务器在接收到图片源文件后，首先向解析服务器发送了解析任务消息。此处，解析任务消息可以用于通知解析服务器进行图片源文件的拉取。

之后，解析服务器可以从存储服务器中获取图片源文件，并对该图片源文件进行预处理、解析等处理。最终，生成用于还原图片的程序代码。

最后，上述解析服务器可以将上述用于还原图片的程序代码发送至上述存储服务器的指定目录中，上述存储服务器即可对上述用于还原图片的程序代码进行存储。此时，前端工程师就即可下载并使用上述用于还原图片的程序代码。

由此，在软件或网页的开发过程中，视觉设计师和前端工程师可以并行作业，从整体上提高了软件或网页的开发效率。

进一步参考图4，作为对上述各图所示方法的实现，本申请提供了一种代码生成装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于服务器中。

如图4所示，本实施例所述的代码生成装置400包括：获取单元401，被配置成获取待处理的图片源文件；提取单元402，被配置成提取上述图片源文件中的各元素和上述各元素的属性信息，其中，上述图片源文件中的元素包括图层和以下至少一项：矢量图、切片、文本，上述属性信息包括元素覆盖顺序；解析单元403，被配置成对上述属性信息进行解析，生成元素间的位置关系信息；布局单元404，被配置成基于上述位置关系信息，对上述各元素进行布局；代码生成单元406，被配置成基于布局结果和上述属性信息，生成用于还原图片的程序代码。

在本实施例的一些可选的实现方式中，上述属性信息可以包括元素位置信息和元素尺寸信息。上述解析单元403可以包括第一生成模块和第二生成模块(图中未示出)。其中，上述第一生成模块可以被配置成基于上述元素位置信息和上述元素尺寸信息，生成上述各元素对应的盒子模型信息。上述第二生成模块可以被配置成基于上述盒子模型信息、上述元素位置信息和元素尺寸信息，生成元素间的位置关系信息，其中，上述位置关系信息包括元素对应的盒子模型间的距离。

在一些实施例中，上述布局模块可以包括：第一确定模块，被配置成基于上述位置关系信息，确定每行待布局的元素是否存在重合关系，其中，上述重合关系包括全部重合关系和局部重合关系；第二确定模块，被配置成将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。

在一些实施例中，上述属性信息包括元素覆盖顺序；以及该装置还可以包括调整单元(图中未示出)。其中，上述调整单元可以被配置成按照上述元素覆盖顺序，对上述各元素的布局结果进行调整。

在本实施例的一些可选的实现方式中，上述提取单元402可以进一步被配置成：对上述图片源文件进行预处理，其中，上述预处理包括以下至少一项：对上述图片源文件中的各元素进行检查、对上述图片源文件中的各元素进行存储；提取上述各元素，并从上述图片源文件中提取上述各元素的属性信息。

在本实施例的一些可选的实现方式中，上述预处理还包括存储上述图片源文件对应的待还原图片。以及，该装置还可以包括运行单元、第一确定单元和第二确定单元(图中未示出)。其中，上述运行单元可以被配置成运行上述用于还原图片的程序代码，生成还原后图片；第一确定单元，被配置成基于上述还原后图片与上述待还原图片的比较，确定上述还原后图片的还原度；第二确定单元，被配置成基于上述还原度与预设数值的比较，确定上述用于还原图片的程序代码是否合格。

在本实施例的一些可选的实现方式中，该装置还可以包括第三确定单元(图中未示出)。其中，上述第三确定单元可以被配置成确定上述还原后图片与上述待还原图片的像素差值。

在本实施例的一些可选的实现方式中，上述获取单元401可以进一步被配置成：响应于接收到存储服务器发送的解析任务消息，从上述存储服务器中获取待处理的图片源文件。以及，该装置还可以包括存储单元(图中未示出)。其中，上述存储单元可以被配置成将上述用于还原图片的程序代码发送至上述存储服务器。

在本实施例的一些可选的实现方式中，该装置还可以包括：监控单元(图中未示出)。其中，上述监控单元可以被配置成按照预设维度对图片源文件的处理过程进行实时监控，其中，上述预设维度包括以下至少一项：异常状态、还原成功率、耗时信息。

本申请的上述实施例提供的装置，在获取单元401获取到待处理的图片源文件之后，提取单元402可以提取上述图片源文件中的各元素和上述各元素的属性信息。而后，解析单元403可以对上述属性信息进行解析，生成上述元素间的位置关系信息，以便布局单元404基于上述位置关系信息，对上述各元素进行布局。最后，代码生成单元405可以基于布局结果和上述属性信息，生成用于还原图片的程序代码。从而，可以无需人工完成对图片源文件的解析工作，减少了前端工程师的工作量、降低了前端工程师的技能要求；同时，提高了图片源文件的解析速度，提高了网页开发效率。

下面参考图5，其示出了适于用来实现本申请实施例的服务器的计算机系统500的结构示意图。图5示出的服务器仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(cpu)501，其可以根据存储在只读存储器(rom)502中的程序或者从存储部分508加载到随机访问存储器(ram)503中的程序而执行各种适当的动作和处理。在ram503中，还存储有系统500操作所需的各种程序和数据。cpu501、rom502以及ram503通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。

以下部件连接至i/o接口505：包括键盘、鼠标等的输入部分506；包括诸如液晶显示器(lcd)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至i/o接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(cpu)501执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括获取单元、提取单元、解析单元、布局单元和代码生成单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时，使得该装置：获取待处理的图片源文件；提取所述图片源文件中的各元素和所述各元素的属性信息；对所述属性信息进行解析，生成所述各元素的位置关系信息；基于所述位置关系信息，对所述各元素进行布局；基于布局结果和所述属性信息，生成用于还原图片的程序代码。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。