[发明专利]一种代码生成方法和电子设备

说明书

本申请提供了一种代码生成方法，包括：获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。采用该方法，分别自动对设计图的背景以及关键因素生成相应的代码，无需人工进行编码，降低了人工工作量。

技术领域

本申请涉及电子设备领域，更具体的说，是涉及一种代码生成方法和电子设备。

背景技术

随着电子技术的发展，目前，越来越多的网站出现，而现在的网站开发通常可以分为两部分：一部分是后端开发；另外一部分是前端开发。

其中，前端开发的输入一般是设计人员给出的设计图片，前端人员需要根据设计图片来编写HTML(Hyper Text Markup Language，超文本标记语言)和CSS(CascadingStyle Sheets，层叠样式表)代码来实现设计效果，但是，现有技术中采用的人工根据设计图片进行编码方法，工作的工作量比较大。

发明内容

有鉴于此，本申请提供了一种代码生成方法，解决了现有技术中人工根据设计图片进行编码的方法导致工作量较大的问题。

为实现上述目的，本申请提供如下技术方案：

一种代码生成方法，包括：

获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；

识别设计图中的背景，根据所述背景生成对应的背景代码；

识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；

基于所述背景代码和所述元素代码，生成网页代码。

上述的方法，优选的，所述识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码，包括：

依据预设的训练模型识别设计图中的关键元素；

依据预设的分类规则对关键元素进行分类，得到类别；

分析所述设计图得到所述关键元素的属性；

基于预设的代码列表，获取与所述类别和属性对应的元素代码。

上述的方法，优选的，所述依据预设的训练模型识别设计图中的关键元素，包括：

依据预设的切片规则，对所述设计图进行切片；

依据切片的结果表征第一闭合范围中对应同一内容，分析得到所述内容对应一关键元素；

依据所述第一闭合范围的数值，分析得到所述关键元素。

上述的方法，优选的，所述分析所述设计图得到所述关键元素的属性，包括：

基于所述第一闭合范围中对应同一内容，分析得到所述关键元素的属性。

上述的方法，优选的，所述获取设计图之前，还包括：

建立预设关键元素与预设元素代码之间的对应关系，得到代码列表，所述预设元素代码中的类别参数和属性参数可调。

一种电子设备，包括：

本体；

设置于所述本体中的处理器，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。

上述的电子设备，优选的，所述处理器具体用于：