《一种基于图像的界面代码生成的方法》由会员分享，可在线阅读，更多相关《一种基于图像的界面代码生成的方法（17页珍藏版）》请在金锄头文库上搜索。
1、1说 明 书 摘 要本发明实施例公开了一种基于图像的界面代码生成的方法及系统，其方法包括：输入待处理的 UI 设计图并进行预处理；对处理后的设计图进行类型识别，判断 UI 用途；利用蛇形遍历和深度搜索的方法得到多个图层；利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；建立层次化的数据结构记录 UI 设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；利用递归生成不同图层的方法得到界面完整的 HTML 代码。本发明实施例增强了图像界面代码转换的效率，增强用户体验度。1摘 要 附 图输入待处理的 U I 设计图并进行预处理对处理后的设计图进行类型识别 ， 判断 U I
2、用途利用蛇形遍历和深度搜索的方法得到多个图层利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容建立层次化的数据结构记录 U I 设计图中的图层 ， 控件 ，图像 ， 文字的内容和属性全部的网页页面信息利用递归生成不同图层的方法得到界面完整的 H T M L 代码S 1 0 1S 1 0 2S 1 0 3S 1 0 4S 1 0 5S 1 0 61权 利 要 求 书1、一种基于图像的界面代码生成的方法，其特征在于，包括如下步骤：输入待处理的 UI 设计图并进行预处理；对处理后的设计图进行类型识别，判断 UI 用途；利用蛇形遍历和深度搜索的方法得到多个图层；利用文字结合不同类型的界面中
3、的定位识别不可分割的最小子图层内容；建立层次化的数据结构记录 UI 设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；利用递归生成不同图层的方法得到界面完整的 HTML 代码。2、如权利要求 1 所述的基于图像的界面代码生成的方法，其特征在于，所述输入待处理的 UI 设计图并进行预处理包括：通过图像锐化和去噪使得图像画质得到增强。3、如权利要求 2 所述的基于图像的界面代码生成的方法，其特征在于，所述对处理后的设计图进行类型识别，判断 UI 用途包括：搜集不同类型用户界面建立一个 UI 图库；使用 SIFT 算法进行图片识别获取图片特征值；使用特征值匹配库内对应类型的界面，找到相
4、似度最高的一类用来定义这个设计图的类型。4、如权利要求 3 所述的基于图像的界面代码生成的方法，其特征在于，所述利用蛇形遍历和深度搜索的方法得到多个图层包括：切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘；2得到层叠的多图层数据的预期效果。5、如权利要求 4 所述的基于图像的界面代码生成的方法，其特征在于，所述利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容包括：处理背景图片，将 UI 设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色信息。6、如权利要求 5 所述的基于图像的界面代码生成的方法，其特征在于，所述将 UI 设计图中的文字转化为文本信息
5、包括：解决图像中文字区域存在的放置稍微倾斜甚至颠倒的现象，减少其对后续识别处理的影响；将这个字从整个图像中分割出来；运用 K-means 提取文字图像；利用神经网络算法将图像文字分割后的单字图像进行特征提取，然后与训练库进行匹配。7、如权利要求 6 所述的基于图像的界面代码生成的方法，其特征在于，所述利用递归生成不同图层的方法得到界面完整的 HTML 代码包括：编写一种代码转换程序；利用递归生成不同图层的方法得到界面完整的 HTML 代码将得到的 page 类的对象传入并获得源代码。8、一种基于图像的界面代码生成的系统，其特征在于，所述系统包括：预处理模块，用于输入待处理的 UI 设计图并进行
6、预处理；图形识别模块，用于对处理后的设计图进行类型识别，判断 UI 用途；3图层处理模块，用于利用蛇形遍历和深度搜索的方法得到多个图层；图层定位模块，用于利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；页面层次化模块，用于建立层次化的数据结构记录 UI 设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；代码化模块，用于利用递归生成不同图层的方法得到界面完整的HTML 代码。1说 明 书一种基于图像的界面代码生成的方法及系统技术领域本发明涉及计算机技术领域，尤其涉一种基于图像的界面代码生成的方法及系统。背景技术专利 CN201010194523.6 的一种基于模板的
7、用户应用界面代码自动生成方法。这一方法通过对于客户的要求分析业务需求，通过获得的需求业务模型，解析业务模型并搜索典型界面模板库。又有专利CN200610001470.5 的一种界面自动生成方法和系统。这一方法通过编译配置文件生成配置描述代码，将代码加载到内存空间，从而形成用户应用界面。专利 CN201010194523.6 在使用时分析业务需求来对应不同的模板界面，大大降低了灵活性。如果后期业务变更频繁，或者同样的业务需求但是有多种可能，工作量依然很大。专利 CN200610001470.5 其界面都是根据配置文件临时生成的，生成的界面是死的，用户不能根据自己的需求来调整界面内容，降低了用户体
8、验。发明内容本发明基于图像的界面代码生成的方法及系统，提高了图像界面代码转换的效率，增强用户体验度。为了解决上述问题，本发明提出了一种基于图像的界面代码生成的方法，包括如下步骤：输入待处理的 UI 设计图并进行预处理；对处理后的设计图进行类型识别，判断 UI 用途；利用蛇形遍历和深度搜索的方法得到多个图层；2利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；建立层次化的数据结构记录 UI 设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；利用递归生成不同图层的方法得到界面完整的 HTML 代码。所述输入待处理的 UI 设计图并进行预处理包括：通过图像锐化和去噪使得图
9、像画质得到增强。所述对处理后的设计图进行类型识别，判断 UI 用途包括：搜集不同类型用户界面建立一个 UI 图库；使用 SIFT 算法进行图片识别获取图片特征值；使用特征值匹配库内对应类型的界面，找到相似度最高的一类用来定义这个设计图的类型。所述利用蛇形遍历和深度搜索的方法得到多个图层包括：切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘；得到层叠的多图层数据的预期效果。所述利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容包括：处理背景图片，将 UI 设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色信息。所述将 UI 设计图中的文字转化为文本信息包括
10、：解决图像中文字区域存在的放置稍微倾斜甚至颠倒的现象，减少其对后续识别处理的影响；将这个字从整个图像中分割出来；运用 K-means 提取文字图像；利用神经网络算法将图像文字分割后的单字图像进行特征提取，然后与训练库进行匹配。所述利用递归生成不同图层的方法得到界面完整的 HTML 代码包括：编写一种代码转换程序；3利用递归生成不同图层的方法得到界面完整的 HTML 代码将得到的 page 类的对象传入并获得源代码。相应的，本发明还提供了一种基于图像的界面代码生成的系统，所述系统包括：预处理模块，用于输入待处理的 UI 设计图并进行预处理；图形识别模块，用于对处理后的设计图进行类型识别，判断 U
11、I 用途；图层处理模块，用于利用蛇形遍历和深度搜索的方法得到多个图层；图层定位模块，用于利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；页面层次化模块，用于建立层次化的数据结构记录 UI 设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；代码化模块，用于利用递归生成不同图层的方法得到界面完整的HTML 代码。通过实施本发明实施例，通过图片预处理，增强图像画质，对处理后的设计图进行类型识别，判断 UI 用途；利用蛇形遍历+深度搜索的方法得到多个图层，利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，建立层次化的数据结构记录 UI 设计图中的图层，控件，
12、图像，文字的内容和属性等全部的网页页面信息，最后利用递归生成不同图层的方法等到界面完整的 HTML 代码，增强了图像界面代码转换的效率，增强用户体验度。附图说明为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。图 1 是本发明实施例中的基于图像的界面代码生成的方法流程图；4图 2 是本发明实施例中的缘分割算法代码示例图；图 3 是本发明实施例中的主页型的页面结构示意图；图 4 是本发明实施例
13、中的登录/注册页型的页面常见的布局方式结构示意图；图 5 是本发明实施例中的基于图像的界面代码生成的系统结构示意图。具体实施方式下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。本发明拟基于以上原则设计可以较精准检测用户使用智能手机过程中的眼睛状况，即使在采集到的是弱光照等恶劣环境中的较低质量图像信息。在发生不同程度的疲劳状态后激发有效的干预系统，达到阻止眼疲劳恶化而导致的各种问题，同时
14、要尽可能地减少干扰智能手机设备的正常任务执行。本发明实施例的基于图像的用户界面代码自动生成的方法包括：输入待处理的 UI 设计图并进行简单预处理，如画质增强；对处理后的设计图进行类型识别，判断 UI 用途；利用蛇形遍历+深度搜索的方法得到多个图层，利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，建立层次化的数据结构记录 UI 设计图中的图层，控件，图像，文字的内容和属性等全部的网页页面信息，最后利用递归生成不同图层的方法等到界面完整的 HTML 代码。相应的，图 1 示出了本发明实施例中的基于图像的界面代码生成的方法流程图，其具体实施过程如下：S101、输入待处理的 UI 设计
15、图并进行预处理；首先可以对 UI 设计图进行预处理，通过锐化，去噪等手段都可以使5画质得到增强，防止了噪声等图片的干扰因素在实际操作中使用识别算法和切割算法造成的不精确的结果，极大地提升后续切割图像和识别图像的精确度。实施本发明实施例的方法，可以解决用户界面代码自动生成普遍存在的低灵活性。同时我们使用了改进的分割算法加强了图像分割的精度，建立有独特的存储页面信息的数据结构（如页面类型，图层维度，组件，背景等） ，将页面信息参数化并通过将数据传入相应程序从而生成对应代码段，实现了高效率的 UI 开发过程。S102、对处理后的设计图进行类型识别，判断 UI 用途；具体实施过程中，通过搜集大量主页，
16、登陆/注册页，产品列表页等现有的不同类型用户界面建立一个 UI 图库；使用 SIFT 算法进行图片识别获取图片特征值；使用特征值匹配库内对应类型的界面，找到相似度最高的一类，用来定义这个设计图的类型。S103、利用蛇形遍历和深度搜索的方法得到多个图层；使用利用蛇形遍历+ 深度搜索的方法进行图像分割，并在分割过程中记录图层的 Z-index 值，以达到切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘，得到层叠的多图层数据的预期效果，改进后的边缘分割算法如图 2 中所示。在实际实施中，可能遇到很多种情况使得一般的分割算法精度不高，或是不能满足我们对于 UI 设计图的分割要求。但是经改进后的分割算法能够解决将边框像素为 1 的边界准确划分的问题，设置合理的阈值解决了把渐变色图形错误分割的问题，引入参数 z 表示不同的图层，体现了控件之间的包含关系，并以此划分。在分割的过程中，通过记录分割出的控件的相对位置等信息，为
