代码生成方法、装置、计算机系统及可读存储介质制造方法及图纸

本发明专利技术公开了代码生成方法、装置、计算机系统及可读存储介质，应用于研发管理领域，包括以下步骤：接收终端发送的样本图片，识别样本图片中的功能区和背景色值，并获得包括功能区的位置及其功能相对高度的功能区信息；识别功能区中入口图像的轮廓以获得包括入口图像的数量及其位置的入口属性信息；根据入口图像的轮廓从样本图片中裁切并获取入口图像及其入口尺寸信息；根据背景色值和功能区信息生成基础代码，根据入口属性信息划分基础代码中的功能区并生成布局代码，根据入口尺寸信息将入口图像插入布局代码以生成样本代码，将样本代码发送至终端。本发明专利技术实现了自动采集图片信息并自动生成代码的效果，消除了当前自动生成UI代码方案的局限性。

Code generation method, device, computer system and readable storage medium

【技术实现步骤摘要】
代码生成方法、装置、计算机系统及可读存储介质
本专利技术涉及计算机
，尤其涉及一种代码生成方法、装置、计算机系统及可读存储介质。
技术介绍
自动化生成用户操作界面代码，是一种提高系统及程序开发的效率，缩短开发的时间，减少系统开发中用户操作界面代码的重复投入工作量的方法，当前业内的自动化生成UI代码的方案，通常是从sketch或photoshop等界面设计软件的设计文件中读取设计内容并将其转化成UI代码，或从设计软件生成的html或者xml文件的中读取到特定的标签并将其转化成UI代码；由于当前业内所采用的方案需要获取到设计文件或特定标签，才可自动生成特定的UI代码，而一旦用户接收到的文件无法获得其设计文件或特定标签(如，图片，截图或照片)时，上述方案将无法根据该文件自动生成UI代码，给自动生成UI代码操作带来了极大的局限性。
技术实现思路
本专利技术的目的是提供一种代码生成方法、装置、计算机系统及可读存储介质，用于解决现有技术存在的对于无法获得其设计文件或特定标签的文件，无法自动生成UI代码的问题。为实现上述目的，本专利技术提供一种代码生成方法，包括以下步骤：接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度是指功能区相比于样本图片的高度；识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。上述方案中，所述识别所述样本图片中的功能区并获得包括所述功能区的位置及其功能相对高度的功能区信息包括：识别所述样本图片中的入口像素和背景像素，提取所述背景像素的色值并将其设为背景色值；其中，所述入口像素是构成入口图像的像素点，背景像素是构成样本图片的背景的像素点；根据所述入口像素和背景像素识别所述样本图片中的功能区；所述功能区是指样本图片中包括入口图像的区域；获取所述功能区的功能相对高度和位置并将其设为功能区信息。上述方案中，所述识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息包括：识别所述功能区内首位像素和末位像素，并根据所述首位像素和末位像素获得连续入口像素集；其中，所述连续入口像素集是指连续出现且未被背景像素在功能区的行方向或列方向中断的入口像素集合；获取所述连续入口像素集的轮廓像素，并根据所述轮廓像素识别所述入口图像的轮廓；其中，所述轮廓像素是指位于连续入口像素集边界的像素点；根据所述入口图像的轮廓获得所述入口图像的中心点，提取所述中心点的坐标并将其设为入口图像的位置，计算所述功能区中中心点的数量并将该数量设为入口图像的数量，汇总所述入口图像的数量及其位置以获得入口属性信息。上述方案中，所述根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息包括：通过裁切模块根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像；将所述功能区的功能相对高度设为所述入口图像的入口尺寸信息。上述方案中，所述根据所述背景色值和功能区信息生成基础代码包括：通过代码生成模块新建背景代码并对所述背景代码赋以背景色值；通过代码生成模块根据所述功能区信息在所述背景代码中插入功能区以生成基础代码。上述方案中，所述根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码包括：提取所述入口属性信息中入口图像的数量，根据该数量划分所述基础代码中的功能区使其形成至少一个子区域；获取所述子区域的中间点，根据所述入口属性信息中各入口图像的位置，调节子区域的尺寸使所述中间点与入口图像的位置一致并生成布局代码。上述方案中，所述根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码包括：提取所述入口尺寸信息以调整所述入口图像的尺寸；将调整后的入口图像插入所述子区域以生成样本代码。为实现上述目的，本专利技术还提供一种代码生成装置，包括：第一识别模块，用于接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；第二识别模块，用于识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；图像裁切模块，用于根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；代码生成模块，用于根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。为实现上述目的，本专利技术还提供一种计算机系统，其包括多个计算机设备，各计算机设备包括存储器.处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述多个计算机设备的处理器执行所述计算机程序时共同实现上述代码生成方法的步骤。为实现上述目的，本专利技术还提供一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现上述代码生成方法的步骤。本专利技术提供的代码生成方法、装置、计算机系统及可读存储介质，通过实现自动采集图片信息，并根据采集的信息自动生成用于描述页面信息的代码的技术效果，不仅消除了当前业界自动生成UI代码方案的局限性，提高了页面代码的获取效率，还保证了页面代码相比于原图片的还原度，因此，无论接收到的图片是否包括设计信息或特定标签，本申请均可通过该图片自动生成用于描述该图片的UI代码，极大的扩展了自动生成UI代码的适用范围，为页面开发人员的工作提供了极大的便利。附图说明图1示意性示出了根据本申请实施例一的代码生成方法的环境应用示意图。图2为本专利技术代码生成方法实施例一的流程图；图3为本专利技术代码生成方法实施例一S1中识别样本图片获得功能区信息的流程图；图4为本专利技术代码生成方法实施例一S2中识别功能区获得入口属性信息的具体流程图；图5为本专利技术代码生成方法实施例一中S3中从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息的具体流程图；图6为本专利技术代码生成方法实施例一S4中生成基础代码的具体流程图；图7本文档来自技高网...

【技术保护点】
1.一种代码生成方法，其特征在于，包括以下步骤：/n接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；/n识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；/n根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；/n根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。/n

【技术特征摘要】
1.一种代码生成方法，其特征在于，包括以下步骤：
接收终端发送的样本图片，识别所述样本图片中的功能区和背景色值，并获得包括所述功能区的位置及其功能相对高度的功能区信息，其中，所述背景色值是指样本图片中的背景颜色，所述功能相对高度为功能区的高度相比于样本图像的整体高度的比值；
识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息；
根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息；所述入口尺寸信息用于描述所述入口图像相对于样本图像的尺寸比；
根据所述背景色值和功能区信息生成基础代码，根据所述入口属性信息划分所述基础代码中的功能区并生成布局代码，根据所述入口尺寸信息将所述入口图像插入所述布局代码以生成样本代码，将所述样本代码发送至所述终端。


2.根据权利要求1所述的代码生成方法，其特征在于，所述识别所述样本图片中的功能区并获得包括所述功能区的位置及其功能相对高度的功能区信息包括：
识别所述样本图片中的入口像素和背景像素，提取所述背景像素的色值并将其设为背景色值；其中，所述入口像素是构成入口图像的像素点，背景像素是构成样本图片的背景的像素点；
根据所述入口像素和背景像素识别所述样本图片中的功能区；所述功能区是指样本图片中包括入口图像的区域；
获取所述功能区的功能相对高度和位置并将其设为功能区信息。


3.根据权利要求1所述的代码生成方法，其特征在于，所述识别所述功能区中入口图像的轮廓以获得包括所述入口图像的数量及其位置的入口属性信息包括：
识别所述功能区内首位像素和末位像素，并根据所述首位像素和末位像素获得连续入口像素集；其中，所述连续入口像素集是指连续出现且未被背景像素在功能区的行方向或列方向中断的入口像素集合；
获取所述连续入口像素集的轮廓像素，并根据所述轮廓像素识别所述入口图像的轮廓；其中，所述轮廓像素是指位于连续入口像素集边界的像素点；
根据所述入口图像的轮廓获得所述入口图像的中心点，提取所述中心点的坐标并将其设为入口图像的位置，计算所述功能区中中心点的数量并将该数量设为入口图像的数量，汇总所述入口图像的数量及其位置以获得入口属性信息。


4.根据权利要求1所述的代码生成方法，其特征在于，所述根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像及其入口尺寸信息包括：
通过裁切模块根据所述入口图像的轮廓从所述样本图片中裁切并获取所述入口图像；
将所述功能区的功能相对高度设为所述入口图像...

【专利技术属性】
技术研发人员：蒋磊，
申请(专利权)人：深圳壹账通智能科技有限公司，
类型：发明
国别省市：广东;44