[发明专利]代码生成方法、装置、服务器及计算机可读介质

说明书

本申请实施例公开了代码生成方法、装置、服务器及计算机可读介质。该方法的实施例包括：获取待处理的图片源文件；提取该图片源文件中的各元素和各元素的属性信息；对该属性信息进行解析，生成各元素的位置关系信息；基于该位置关系信息，对各元素进行布局；基于布局结果和该属性信息，生成用于还原图片的程序代码。该实施方式提高了网页的开发效率。

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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