本申请涉及电子设备领域，更具体的说，是涉及一种代码生成方法和电子设备。
背景技术
随着电子技术的发展，目前，越来越多的网站出现，而现在的网站开发通常可以分为两部分：一部分是后端开发；另外一部分是前端开发。
其中，前端开发的输入一般是设计人员给出的设计图片，前端人员需要根据设计图片来编写html(hypertextmarkuplanguage，超文本标记语言)和css(cascadingstylesheets，层叠样式表)代码来实现设计效果，但是，现有技术中采用的人工根据设计图片进行编码方法，工作的工作量比较大。
技术实现要素：
有鉴于此，本申请提供了一种代码生成方法，解决了现有技术中人工根据设计图片进行编码的方法导致工作量较大的问题。
为实现上述目的，本申请提供如下技术方案：
一种代码生成方法，包括：
获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；
识别设计图中的背景，根据所述背景生成对应的背景代码；
识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；
基于所述背景代码和所述元素代码，生成网页代码。
上述的方法，优选的，所述识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码，包括：
依据预设的训练模型识别设计图中的关键元素；
依据预设的分类规则对关键元素进行分类，得到类别；
分析所述设计图得到所述关键元素的属性；
基于预设的代码列表，获取与所述类别和属性对应的元素代码。
上述的方法，优选的，所述依据预设的训练模型识别设计图中的关键元素，包括：
依据预设的切片规则，对所述设计图进行切片；
依据切片的结果表征第一闭合范围中对应同一内容，分析得到所述内容对应一关键元素；
依据所述第一闭合范围的数值，分析得到所述关键元素。
上述的方法，优选的，所述分析所述设计图得到所述关键元素的属性，包括：
基于所述第一闭合范围中对应同一内容，分析得到所述关键元素的属性。
上述的方法，优选的，所述获取设计图之前，还包括：
建立预设关键元素与预设元素代码之间的对应关系，得到代码列表，所述预设元素代码中的类别参数和属性参数可调。
一种电子设备，包括：
本体；
设置于所述本体中的处理器，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。
上述的电子设备，优选的，所述处理器具体用于：
依据预设的训练模型识别设计图中的关键元素；
依据预设的分类规则对关键元素进行分类，得到类别；
分析所述设计图得到所述关键元素的属性；
基于预设的代码列表，获取与所述类别和属性对应的元素代码。
上述的电子设备，优选的，所述处理器具体用于：
依据预设的切片规则，对所述设计图进行切片；
依据切片的结果表征第一闭合范围中对应同一内容，分析得到所述内容对应一关键元素；
依据所述第一闭合范围的数值，分析得到所述关键元素。
上述的电子设备，优选的，所述处理器具体用于：
基于所述第一闭合范围中对应同一内容，分析得到所述关键元素的属性。
一种电子设备，包括：
获取模块，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；
背景模块，用于识别设计图中的背景，根据所述背景生成对应的背景代码；
关键元素模块，用于识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；
网页模块，用于基于所述背景代码和所述元素代码，生成网页代码。
经由上述的技术方案可知，与现有技术相比，本申请提供了一种代码生成方法，包括：获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。采用该方法，分别自动对设计图的背景以及关键因素生成相应的代码，无需人工进行编码，降低了人工工作量。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1是本申请提供的一种代码生成方法实施例1的流程图；
图2是本申请提供的一种代码生成方法实施例1中设计图示意图；
图3是本申请提供的一种代码生成方法实施例2的流程图；
图4是本申请提供的一种代码生成方法实施例3的流程图；
图5是本申请提供的一种代码生成方法实施例3中关键元素示意图；
图6是本申请提供的一种代码生成方法实施例4的流程图；
图7是本申请提供的一种电子设备实施例1的结构示意图；
图8是本申请提供的一种电子设备实施例2的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请各实施例中，可交互对象指图形用户界面上能够接受用户的操作而执行特定功能的对象，包括，滑块、滑动条、按钮、图标、图形、以及在此涵义下本领域技术人员知晓的其他具体的可接受交互操作的对象，本文对此不做特殊限制。
如图1所示的，为本申请提供的一种代码生成方法实施例1的流程图，该方法应用于一电子设备，该方法包括以下步骤：
步骤s101：获取设计图；
其中，所述设计图是设计人员针对目标设计网页绘制的图片。
具体实施中，该设计图中包括背景、关键元素等内容。
如图2所示的为设计图示意图，其中，该设计图中包括背景201和关键元素，其中，该实线框表示设计图边缘，该虚线框表示背景部分与关键元素所在部分的分界线，该背景所在区域中有图案，该关键元素包括两个图片202、文本框203和提交按钮204。
需要说明的是，该图2所示的仅是示意图，具体实施总，其中包含的内容不限制于此，还可以有其他形式的图案、关键元素等。
具体实施中，该设计图可以为该设计人员在电子设备中通过电子设备的输入装置(如键盘、鼠标、触控板等)输入绘制的，也可以为设计人员在其他设备中完成绘制后，通过传输接口，如usb(universalserialbus，通用串行总线)接口等输入该电子设备中的。
步骤s102：识别设计图中的背景，根据所述背景生成对应的背景代码；
其中，先对该设计图中的背景进行识别。
具体实施中，可以通过图像识别模型对该设计图中的背景图进行识别。
其中，当识别得到该设计图中的背景后，根据该背景生成对应的背景代码。
具体实施中，该电子设备中预设有背景代码模板，其中一些参数及其参数值可调，则根据该识别得到的背景，对该背景代码模板中可调参数及其参数值进行调整，即可得到该背景对应的背景代码。
步骤s103：识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；
其中，对该设计图中的关键元素进行识别。
需要说明的是，该关键元素是指该设计图中出背景外的其他在网页中需要嵌入的内容，如嵌入网页的图片、可以输入的文本框、按钮、表格等。
具体实施中，该电子设备中预设有关键元素代码模板，如某一关键元素的代码类似，只是其中一些参数及其参数值可调，则根据该识别得到的关键元素，分别对其对应的关键元素代码模板中可调参数及其参数值进行调整，即可得到该关键元素对应的元素代码。
需要说明的是，后续实施例中会针对该过程进行详细解释，本实施例中不做详述。
需要说明的是，本申请中的各个实施例中，是以先识别背景并生成背景代码，然后才识别关键元素生成元素代码，但是二者的先后顺序不限制于此，具体实施中，也可以先识别关键元素生成元素代码，再识别背景并生成背景代码，或者两个步骤可以同时进行。
步骤s104：基于所述背景代码和所述元素代码，生成网页代码。
其中，根据该已经生成的背景代码和元素代码，结合预设的二者结合方式，生成网页代码。
需要说明的是，由于该网页中的元素代码和背景代码是分别基于设计图中的内容生成的，二者之间无固定的限制关系，在降低了编码人员的工作量的前提下，灵活度较高，网页内容涵盖广。
综上，本实施例提供了一种代码生成方法，包括：获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。采用该方法，分别自动对设计图的背景以及关键因素生成相应的代码，无需人工进行编码，降低了人工工作量。
如图3所示的，为本申请提供的一种代码生成方法实施例2的流程图，该方法包括以下步骤：
步骤s301：获取设计图；
步骤s302：识别设计图中的背景，根据所述背景生成对应的背景代码；
其中，步骤s301-302与实施例1中步骤s101-102一致，本实施例中不做赘述。
步骤s303：依据预设的训练模型识别设计图中的关键元素；
其中，该训练模型是具有图像识别功能的模型，其对于图片中特定内容(如关键元素)就那些识别。
需要说明的是，后续实施例中会对该识别关键元素的过程进行详细说明，本实施例中不做详述。
步骤s304：依据预设的分类规则对关键元素进行分类，得到类别；
其中，该电子设备中还设置有分类规则，根据该分类规则对关键元素进行分类。
其中，类别可以包括输入框、选择框、按钮、表格等。
具体实施中，可以通过分类器体现该分类规则，该分类器对识别得到的关键元素进行分类。
需要说明的是，具体实施中，该关键元素的类别，是用于在生成代码时对应特定的标签，不同的类别对应不同的标签。
步骤s305：分析所述设计图得到所述关键元素的属性；
其中，该属性包括该关键元素的基础属性，如长度、宽度等。
需要说明的是，该属性是生成代码时所需的信息。
如该关键元素为表格时，其属性包括：线条的宽度、颜色值等，如该关键元素为输入框时，其属性包括输入框的长度、宽度和边框等。
需要说明的是，具体实施中，为每个关键元素的属性设置相应的分析模型，各个分析模型分别对该设计图进行分析，得到该关键元素对应的属性。
步骤s306：基于预设的代码列表，获取与所述类别和属性对应的元素代码；
其中，该电子设备中预设代码列表，该代码列表中对应设置有类别和属性以及其对应的元素代码。
具体的，基于该分析得到的类别和属性，从该代码列表中获取相应的元素代码。
步骤s307：基于所述背景代码和所述元素代码，生成网页代码。
其中，步骤s307与实施例1中步骤s104一致，本实施例中不做赘述。
综上，本实施例提供了一种代码生成方法中，所述识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码，包括：依据预设的训练模型识别设计图中的关键元素；依据预设的分类规则对关键元素进行分类，得到类别；分析所述设计图得到所述关键元素的属性；基于预设的代码列表，获取与所述类别和属性对应的元素代码。该方法中，通过识别设计图中的关键元素的类别和属性确定对应的元素代码，保证后续生成的元素代码中包含该元素代码对应的参数以及标签等各种必须的内容，以实现在元素代码在执行过程能够正常执行。
如图4所示的，为本申请提供的一种代码生成方法实施例3的流程图，该方法包括以下步骤：
步骤s401：获取设计图；
步骤s402：识别设计图中的背景，根据所述背景生成对应的背景代码；
其中，步骤s401-402与实施例2中步骤s301-302一致，本实施例中不做赘述。
步骤s403：依据预设的切片规则，对所述设计图进行切片；
具体的，电子设备中预设切片规则，例如，基于预设的宽度对设计图进行切片，得到若干小图；也可按照颜色范围的条件，同一颜色对应一个范围，将图片切成若干小图。
步骤s404：依据切片的结果表征第一闭合范围中对应同一内容，分析得到所述内容对应一关键元素；
具体的，根据该切片得到的结果，将多个小图中表征一个闭合范围中的内容作为同一内容。
进一步的，对该闭合范围中对应的内容进行分析，得到其对应一关键元素。
基于同一关键元素对应的颜色或者其他内容(如图像内容)连续，即形成一个闭合范围，所以，根据该闭合范围就确定其对应同一内容，进而确定该内容对应一个关键元素。
步骤s405：依据所述第一闭合范围的数值，分析得到所述关键元素；
其中，该第一闭合范围对应的就是该关键元素的范围。
具体实施中，每种关键元素的尺寸、长宽比等数值可知，不同的关键元素的数值不同。
具体的，根据该第一闭合范围的数值，如长、宽、颜色值，结合预设的关键元素的数值进行比较，即可分析得到该关键元素具体的哪个关键元素，如该关键元素是输入框。
步骤s406：依据预设的分类规则对关键元素进行分类，得到类别；
其中，步骤s406与实施例2中步骤s304一致，本实施例中不做赘述。
步骤s407：分析所述设计图得到所述关键元素的属性；
其中，该步骤s407具体包括如下步骤：
基于所述第一闭合范围中对应同一内容，分析得到所述关键元素的属性。
具体实施中，由于已知关键元素的范围为第一闭合范围，则根据该第一闭合范围，分析得到其相应的关键元素的属性。
具体的，对该设计图进行分析，得到该第一闭合范围的过程中，同步得到该第一闭合范围在该设计图中的相对位置(可以采用坐标范围来表示)，即可分析得到与位置相关的信息，如表格、线条的宽度，输入框的长宽、边框等信息。
图5所示的为设计图中一关键元素示意图，该关键元素为一个输入框501。
具体实施中，分析该设计图即可得到该输入框以及其属性，具体可以以该设计图的左下角为坐标原点，即分析得到该输入框的坐标范围，以及该输入框的长宽、边框宽度等各种属性信息。
步骤s408：基于预设的代码列表，获取与所述类别和属性对应的元素代码；
步骤s409：基于所述背景代码和所述元素代码，生成网页代码。
其中，步骤s408-409与实施例2中步骤s306-307一致，本实施例中不做赘述。
综上，本实施例提供了一种代码生成方法中，所述依据预设的训练模型识别设计图中的关键元素，包括：依据预设的切片规则，对所述设计图进行切片；依据切片的结果表征第一闭合范围中对应同一内容，分析得到所述内容对应一关键元素；依据所述第一闭合范围的数值，分析得到所述关键元素。采用该方法，通过对设计图进行切片处理，即可分析得到该设计图中的关键元素，过程简单。
如图6所示的，为本申请提供的一种代码生成方法实施例4的流程图，该方法包括以下步骤：
步骤s601：建立预设关键元素与预设元素代码之间的对应关系，得到代码列表；
其中，所述预设元素代码中的类别参数和属性参数可调。
具体实施中，电子设备中预设代码列表，该代码列表中包括关键元素与关键元素代码之间的对应关系。
具体实施中，由于不同的关键元素的类别以及属性等信息不同，所以，在预设元素代码中的类别参数和属性参数可调，以实现识别设计图时，能够根据设计图中关键元素的具体情况相应调整其类别参数和属性参数，进而得到设计图中关键元素对应的元素代码，不同的关键元素对应不同的元素代码。
当然，具体实施中，还可以设置背景代码与背景之间的对应关系。
步骤s602：获取设计图；
步骤s603：识别设计图中的背景，根据所述背景生成对应的背景代码；
步骤s604：识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；
步骤s605：基于所述背景代码和所述元素代码，生成网页代码。
其中，步骤s602-605与实施例1中步骤s101-104一致，本实施例中不做赘述。
综上，本实施例提供了一种代码生成方法中，还包括：建立预设关键元素与预设元素代码之间的对应关系，得到代码列表，所述预设元素代码中的类别参数和属性参数可调。采用该方法，预设代码列表，以使得在基于设计图生成网页代码过程中，只需从代码列表中查找相应的元素代码，简单易行。
与上述本申请提供的一种信息处理方法实施例相对应的，本申请还提供了应用该信息处理方法的电子设备实施例。
如图7所示的为本申请提供的一种电子设备实施例1的结构示意图，该电子设备中具有截屏功能，该电子设备包括以下结构：本体701和处理器702；
其中，该处理器702设置于所述本体701中，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。
具体实施中，该处理器可以为电子设备中具有信息处理能力的芯片等结构，如可以采用cpu(centralprocessingunit，中央处理器)等。
优选的，所述处理器具体用于：
依据预设的训练模型识别设计图中的关键元素；
依据预设的分类规则对关键元素进行分类，得到类别；
分析所述设计图得到所述关键元素的属性；
基于预设的代码列表，获取与所述类别和属性对应的元素代码。
优选的，所述处理器具体用于：
依据预设的切片规则，对所述设计图进行切片；
依据切片的结果表征第一闭合范围中对应同一内容，分析得到所述内容对应一关键元素；
依据所述第一闭合范围的数值，分析得到所述关键元素。
优选的，所述处理器具体用于：
基于所述第一闭合范围中对应同一内容，分析得到所述关键元素的属性。
综上，本实施例提供了一种电子设备，包括：本体；设置于所述本体中的处理器，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；识别设计图中的背景，根据所述背景生成对应的背景代码；识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；基于所述背景代码和所述元素代码，生成网页代码。采用该电子设备，分别自动对设计图的背景以及关键因素生成相应的代码，无需人工进行编码，降低了人工工作量。
如图8所示的为本申请提供的一种电子设备实施例2的结构示意图，该电子设备中具有截屏功能，该电子设备包括以下结构：获取模块801、背景模块802、关键元素模块803和网页模块804；
其中，该获取模块801，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；
其中，该背景模块802，用于识别设计图中的背景，根据所述背景生成对应的背景代码；
其中，该关键元素模块803，用于识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；
其中，该网页模块804，用于基于所述背景代码和所述元素代码，生成网页代码。
综上，本实施例提供了一种电子设备，包括：获取模块，用于获取设计图，所述设计图是设计人员针对目标设计网页绘制的图片；背景模块，用于识别设计图中的背景，根据所述背景生成对应的背景代码；关键元素模块，用于识别所述设计图中的关键元素，生成与所述关键元素对应的元素代码；网页模块，用于基于所述背景代码和所述元素代码，生成网页代码。采用该电子设备，分别自动对设计图的背景以及关键因素生成相应的代码，无需人工进行编码，降低了人工工作量。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例提供的装置而言，由于其与实施例提供的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
对所提供的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所提供的原理和新颖特点相一致的最宽的范围。