CN112416340A - 基于草图的网页生成方法和系统 - Google Patents

基于草图的网页生成方法和系统 Download PDF

Info

Publication number
CN112416340A
CN112416340A CN202010404755.3A CN202010404755A CN112416340A CN 112416340 A CN112416340 A CN 112416340A CN 202010404755 A CN202010404755 A CN 202010404755A CN 112416340 A CN112416340 A CN 112416340A
Authority
CN
China
Prior art keywords
sketch
minimum rectangular
rectangular area
region
blank
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010404755.3A
Other languages
English (en)
Other versions
CN112416340B (zh
Inventor
王海洋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202010404755.3A priority Critical patent/CN112416340B/zh
Publication of CN112416340A publication Critical patent/CN112416340A/zh
Application granted granted Critical
Publication of CN112416340B publication Critical patent/CN112416340B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/425—Lexical analysis
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/20—Image preprocessing
    • G06V10/25—Determination of region of interest [ROI] or a volume of interest [VOI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/20—Image preprocessing
    • G06V10/26—Segmentation of patterns in the image field; Cutting or merging of image elements to establish the pattern region, e.g. clustering-based techniques; Detection of occlusion
    • G06V10/267—Segmentation of patterns in the image field; Cutting or merging of image elements to establish the pattern region, e.g. clustering-based techniques; Detection of occlusion by performing operations on regions, e.g. growing, shrinking or watersheds
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V30/00—Character recognition; Recognising digital ink; Document-oriented image-based pattern recognition
    • G06V30/40—Document-oriented image-based pattern recognition
    • G06V30/41—Analysis of document content
    • G06V30/413—Classification of content, e.g. text, photographs or tables
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Software Systems (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Artificial Intelligence (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请实施例提供了一种基于草图的网页生成方法，所述方法包括：识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案；根据所述多个元素的元素信息，生成语法树；根据所述语法树，生成网页代码；及根据所述网页代码，生成与所述草图对应的目标网页。本实施例所述的基于草图的网页生成方法可以通过草图识别得到用于网页生成的网页布局和多个元素的元素信息，并基于这些信息生成语法树并进而生成网页代码，从而实现了机器自动生成页面代码和相应的目标页面，不需要手动将所述草图转化为网页代码，从而提高网页的开发效率。

Description

基于草图的网页生成方法和系统
技术领域
本申请实施例涉及计算机技术领域，尤其涉及一种基于草图的网页生成方法、系统、计算机设备及计算机可读存储介质。
背景技术
随着互联网的发展，用户对页面的要求越来越高，无论是视觉设计、交互或前端都变得越来越专业，用户需要更漂亮的设计和更强大的技术来实现WEB页面，促进以下新技术：HTML5(HyperTextMarkupLanguage5，超文本标记语言第5版本)和CSS3(CascadingStyleSheets3，层叠样式表第三版本)越来越普及。另外，各种屏幕尺寸的移动终端也在不断的推陈出新，从而带来了新的挑战：前端需要兼容的屏幕尺寸越来越多。基于上述趋势，WEB开发流程变得越来越细分化，设计和开发逐渐分离成两个独立工作：UI设计和前端开发。所述WEB开发流程逐步演变为：UI设计师和前端开发工程师分享他们的想法，尽力表达出潜在的客户场景或工作流程；如果双方达成一致意见，UI设计师可以在白纸或白板上将草图画出来，并由前端开发工程师手动将草图转化为HTML代码。然而，上述转化过程常常需要耗费很多时间和精力，有可能会拖慢产品发布的时间。
可知，现有的WEB开发流程中，转化环节生成的页面代码是通过人工编写的，网页开发效率低下。因此，有必要提供一种能够自动生成页面代码的技术，以提高网页的开发效率。
发明内容
本申请实施例的目的是提供一种基于草图的网页生成方法、系统、计算机设备及计算机可读存储介质，用于解决传统网页开发效率低下、不能能够自动生成页面代码的问题。
本申请实施例的第一方面提供了一种基于草图的网页生成方法，所述方法包括：识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案；根据所述多个元素的元素信息，生成语法树；根据所述语法树，生成网页代码；及根据所述网页代码，生成与所述草图对应的目标网页。
基于第一方面的第二方面，每个元素分别通过预先定义的通用元素进行表示，所述每个元素的元素信息是按照所述通用元素的数据结构进行存储的；其中，所述通用元素的数据结构包括多个数据节点，所述多个数据节点包括元素标识、元素外部尺寸、元素内部尺寸、子元素列表数组、元素类型、父元素对象和背景颜色值。
基于第一方面的第三方面，识别所述草图以获取多个元素的元素信息，包括：沿第一方向对所述草图进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
基于第一方面的第四方面，识别所述草图以获取多个元素的元素信息，包括：裁剪所述草图中的边缘空白区域，得到所述草图中的待处理区域；沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
基于第一方面的第五方面，识别所述草图以获取多个元素的元素信息，包括：处理所述草图的背景颜色，以得到处理后的草图；裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域；沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
基于第五方面的第六方面，裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域，包括：从所述处理后的草图的上边缘起始，从上向下扫描所述处理后的草图，直至扫描到包括非空白像素的第M行；从所述处理后的草图的下边缘起始，从下向上扫描所述处理后的草图，直至扫描到包括非空白像素的第N行；从所述处理后的草图的左边缘起始，从左向右扫描所述处理后的草图，直至扫描到包括非空白像素的第P列；从所述处理后的草图的右边缘起始，从右向左扫描所述处理后的草图，直至扫描到包括非空白像素的第Q列；根据所述处理后的草图中的第M行、第N行、第P列和第Q列，确定所述处理后的草图中的边缘空白区域；及裁剪所述处理后的草图中的所述边缘空白区域，以得到所述待处理区域。
基于第三、四或五方面的第七方面，还包括：在每个原子区域中提取出一个最小矩形区域；将每个原子区域中的最小矩形区域的位置信息确定为每个原子区域的相应元素的位置信息；所述最小矩形区域是指用于容纳相应原子区域中的草图图案的最小矩形区域；该最小矩形区域的第一边方向对应于所述第一方向，且第二边方向对应于所述第二方向。
基于第三、四或五方面的第八方面，所述多个元素包括第一元素，所述第一元素对应于第一原子区域，所述第一原子区域对应有第一最小矩形区域；
识别所述草图以获取多个元素的元素信息，包括：根据所述第一最小矩形区域判断所述第一元素是否为容器元素，所述容器元素包括普通容器元素和表格元素；及如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素。
基于第八方面的第九方面，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，包括：获取所述第一最小矩形区域内部的空白区域在所述第一最小矩形区域中的占比；如果所述占比大于预设阈值，则确定所述第一元素是容器元素；及如果所述占比没有大于所述预设阈值，则确定所述第一元素不是所述容器元素。
基于第八方面的第十方面，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，包括：获取所述第一最小矩形区域的其中一个或多个样本行中的空白像素占比或一个或多个样本列中的空白像素占比；及如果所述一个或多个样本行中的空白像素占比大于所述预设阈值或所述一个或多个样本列中的空白像素占比大于所述预设阈值，则确定所述第一元素是容器元素。
基于第八方面的第十一方面，如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素，包括：去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；沿所述第一方向或所述第二方向，对所述第一无边框最小矩形区域进行扫描，以确定所述第一无边框最小矩形区域是否能够被分割；如果所述第一无边框最小矩形区域能够被分割，则确定所述第一元素为所述表格元素；及如果所述第一无边框最小矩形区域不能够被分割，则确定所述第一元素为所述普通容器元素。
基于第十一方面的第十二方面，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域，包括：以从边缘到中心的方向，探测所述第一最小矩形区域中的多个连续非空白像素；其中，每个连续非空白像素与所述多个连续非空白像素中的至少一个其他连续非空白像素是相邻的且与这个其他连续非空白像素之间的颜色差异在预设范围之内；将所述多个连续非空白像素构成的非空白像素区域确定为所述元素边框；将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
基于第十一方面的第十三方面，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域，包括：从所第一最小矩形区域的左边缘起始，从左向右读取所述第一最小矩形区域的第一组连续非空白像素；从所述第一最小矩形区域的右边缘起始，从右向左读取所述第一最小矩形区域的第二组连续非空白像素；从所述第一最小矩形区域的下边缘起始，从下向上读取所述第一最小矩形区域的第三组连续非空白像素；从所述第一最小矩形区域的上边缘起始，从上向下读取所述第一最小矩形区域的第四组连续非空白像素；根据所述第一、第二、第三和第四组连续非空白像素，确定所述元素边框；将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
基于第十一方面的第十四方面，确定所述第一无边框最小矩形区域是否能够被分割，包括：判断所述第一无边框最小矩形区域是否包括一个或多个空白像素组；其中，所述空白像素组包括空白像素行、多个连续空白像素行、空白像素列或多个连续空白像素列；及如果所述第一无边框最小矩形区域包括一个或多个空白像素组，则确定所述第一无边框最小矩形区域能够被分割。
基于第八方面的第十五方面，还包括：如果所述第一元素为所述表格元素，则从所述第一最小矩形区域中获取多个子元素。
基于第十五方面的第十六方面，从所述第一最小矩形区域中获取多个子元素，包括：去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；及沿所述第一方向或第二方向，对所述第一无边框最小矩形区域进行扫描，以分割得到多个子元素区域；所述每个子元素区域均为用于容纳相应的子元素图案的最小矩形区域；及为每个子元素区域分别生成相应的子元素，以得到所述第一最小矩形区域的所述多个子元素。
基于第十六方面的第十七方面，从所述第一最小矩形区域中获取多个子元素，还包括：判断所述多个子元素区域沿所述第一方向或所述第二方向是否是单一排列的；如果所述述多个子元素区域沿所述第一方向或所述第二方向是单一排列的，则将所述多个子元素确定为所述第一元素的子级；及如果所述述多个子元素区域沿所述第一方向或所述第二方向不是单一排列的，则执行以下操作以得到三层元素结构：插入一个新的容器元素；将所述多个子元素确定为所述插入的容器元素的子级；及将所述插入的容器元素确定为所述第一元素的子级。
本申请实施例的一个方面又提供了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述基于草图的网页生成方法的步骤。
本申请实施例的一个方面又提供了一种计算机可读存储介质，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述基于草图的网页生成方法的步骤。
本申请实施例提供的基于草图的网页生成方法、系统、计算机设备及计算机可读存储介质，可以通过草图识别得到用于网页生成的网页布局和多个元素的元素信息，并基于这些信息生成语法树并进而生成网页代码。通过以上内容可以知道，本申请实施例可以机器自动生成页面代码和相应的目标页面，不需要手动将所述草图转化为网页代码，从而提高网页的开发效率。
附图说明
图1示意性示出了根据本申请实施例一的基于草图的网页生成方法的流程图；
图2示意性示出了图1中步骤S100的子步骤；
图3示意性示出了示例性草图的一部分；
图4示意性示出了图1中步骤S100的另一子步骤；
图5示意性示出了图1中步骤S100的另一子步骤；
图6示意性示出了图5中步骤S500的子步骤；
图7示意性示出了图5中步骤S502的子步骤；
图8示意性示出了图5中的新增步骤；
图9示意性示出了容器元素对应的草图图案和非容器元素对应的草图图案；
图10示意性示出了图5中的新增步骤；
图11示意性示出了图10中步骤S1000的子步骤；
图12示意性示出了图10中步骤S1000的另一子步骤；
图13示意性示出了图12中步骤S1202的子步骤；
图14示意性示出了图12中步骤S1202的另一子步骤；
图15示意性示出了示例性的第一元素对应的草图图案；
图16示意性示出了图10中步骤S1002的另一子步骤；
图17示意性示出了图16中步骤S1600的子步骤；
图18示意性示出了图16中步骤S1600的另一子步骤；
图19示意性示出了一个容器元素对应的草图图案；
图20示意性示出了图16中步骤S1602的子步骤；
图21示意性示出了图10中的新增步骤；
图22示意性示出了图21中步骤S1004的子步骤；
图23示意性示出了图21中步骤S1004的另一子步骤；
图24示意性示出了示例性草图；
图25示意性示出了去背景颜色之后的草图；
图26示意性示出了去边缘空白区域得到的待处理区域；
图27示意性示出了第一次分割操作的分割线；
图28示意性示出了根据本申请实施例二的基于草图的网页生成系统的框图；及
图29示意性示出了根据本申请实施例三的计算机设备的硬件架构示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
名词解释：
HTML(HyperTextMarkupLanguage，超文本标记语言)，其可以通过在文本文件中添加各种标记符，来告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器会按顺序阅读HTML文件，然后根据标记符解释和显示其标记的内容。HTML通过结合使用其他的Web技术(如：脚本语言、公共网关接口、组件等)，可以创造出功能强大的网页。因而，HTML超级文本标记语言也是万维网(Web)的基础。
CSS(CascadingStyleSheets，层叠样式表)，是一种用来表现HTML或XML等文件样式的计算机语言，可以定义样式结构如字体、颜色、位置等。CSS常被用于描述网页上的信息格式化和现实的方式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名“.css”的外部样式单文档中。样式规则是可应用于网页中的元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式文件。
JavaScript，属于直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。JavaScript的解释器被称为JavaScript引擎，广泛应用于各类客户端(如浏览器)中。JavaScript可以给HTML网页增加动态功能。HTML允许JavaScript通过DOM(DocumentObjectModel，文档对象模型)更改HTML元素的CSS样式。
Canvas，又称之为画板，是HTML5的一个新特性。HTML5Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的。HTML5Canvas具有两方面的优势：首先，不需要将所绘制图像中的每个图元当做对象存储，性能非常好；其次，在其他编程语言现有的优秀二绘图API的基础上实现CanvasAPI相对来说简单，因此Canvas被纳入了HTML5规范。Canvas绘图的应用非常广泛，既可以绘制静态的展示性的统计图表，也可以根据用户输入进行交互式的绘图，包括各种矩形、弧形、不规则图形等。
JPEG，其是由联合图像专家组(JointPhotographicExpertsGroup)开发的一种图像格式。大多数彩色和灰度图像都使用JPEG格式压缩图像，压缩比很大而且支持多种压缩级别的格式，当对图像的精度要求不高而存储空间又有限时，JPEG是一种理想的压缩方式。在WorldWideWeb和其它网上服务的HTML文档中，JPEG用于显示图片和其它连续色调的图像文档。JPEG支持CMYK、RGB和灰度颜色模式。JPEG格式保留RGB图像中的所有颜色信息，通过选择性地去掉数据来压缩文件。
PNG(PortableNetworkGraphics，便携式网络图形)，也是一种图片文件格式，该格式的图片文件可以存储任何颜色深度的图像。PNG包括以下优点：支持高级别无损耗压缩、支持alpha通道透明度、支持伽玛校正、支持交错、受最新的Web浏览器支持。
现有的WEB开发流程可以包括如下：UI设计师和前端开发工程师分享他们的想法，尽力表达出潜在的客户场景或工作流程；如果双方达成一致意见，UI设计师可以在白纸或白板上将草图画出来，并由前端开发工程师手动将草图转化为HTML代码。然而，上述转化过程常常需要耗费很多时间和精力，有可能会拖慢产品发布的时间。在头脑风暴时，如果白纸或白板上手绘的草图能够通过机器自动转化成可以在浏览器中运行的代码，则在头脑风暴结束时我们就可以拥有一个已经由设计师、开发人员甚至客户验证过的网页原型，这将为网站和应用程序开发节省不少时间。
以下实施例旨在自动生成页面代码的技术。
实施例一
图1示意性示出了根据本申请实施例一的基于草图的网页生成方法的流程图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以计算机设备为执行主体进行示例性描述。所述计算机设备包括，但不限于，平板电脑、膝上型计算机等。
如图1所示，该基于草图的网页生成方法可以包括步骤S100～S106，其中：
步骤S100，识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案。
所述草图可以是在白纸、白板等上面手绘的网页UI设计图，也可以是借助触控笔或第三方绘图工具在电子设备上绘制的JPEG、PNG等格式的网页UI设计图。所述草图包括多个草图图案，每个草图图案对应一个元素，例如，按钮、输入框、图片等。所述草图中的每个草图图案在所述草图中的位置、类型等，可以代表对应元素在网页中的位置、类型等，因此，计算机设备可以识别出所述草图中所有草图图案以及各个草图图案的位置、类型等信息，并基于各个草图图案的位置、类型等信息来得到各个元素的元素信息(如，各个元素的类型及其在网页中的位置)以及网页布局。
步骤S102，根据所述多个元素的元素信息，生成语法树。
根据各个元素之间的关系，计算机设备可以将所述多个元素组织成所述语法树。所述语法树(SyntaxTree)是网页代码语法结构的一种表示。所述语法树以树状的形式表现编程语言的语法结构，树上的每个节点都表示语法树代码中的一种结构。
步骤S104，根据所述语法树，生成网页代码。
所述网页代码可以是HTML代码或CSS代码等。
步骤S106，根据所述网页代码，生成与所述草图对应的目标网页。
本申请实施例所述的基于草图的网页生成方法，可以通过草图识别得到用于网页生成的网页布局和多个元素的元素信息，并基于这些信息生成语法树并进而生成网页代码。通过以上内容可以知道，本申请实施例可以机器自动生成页面代码和相应的目标页面，不需要手动将所述草图转化为网页代码，从而提高网页的开发效率。
在示例性的实施例中，网页可能包括不同种类的多个元素，所述多个元素可能包括一些基本元素(如，按钮、输入框、图片、段落)和一些由基本组成的复杂元素(如，对话框、地域选择器)，因此，所述草图可能包括多个草图图案，其中一个或多个草图图案可能对应一个或多个按钮，其中一个或多个草图图案对应一个或多个对话框等。
为了更好的描述页面布局结构(即各个元素的元素信息)，本申请实施例预先定义了一种新型的通用元素，每个元素分别通过该预先定义的通用元素进行表示，所述每个元素的元素信息是按照所述通用元素的数据结构进行存储的；其中，所述通用元素的数据结构包括多个数据节点，所述多个数据节点包括元素标识、元素外部尺寸、元素内部尺寸、子元素列表数组、元素类型、父元素对象和背景颜色值。
所述通用元素是基本元素和复杂元素的一个抽象，既可以指基本元素，也可以指复杂元素。
示例性的，所述通用的数据结构定义如下：
{
id:10001，
outer:{yStart:10，yEnd:20，xStart:15，xEnd:50}，
inner:{yStart:10，yEnd:20，xStart:15，xEnd:50}，
child:[]，
nodeType:'row'，
parentElement:null，
bgcolor:”
}
如表1所示，各个数据节点介绍如下：
Figure BDA0002490881640000091
表1
步骤S100中的识别所述草图以获取多个元素的元素信息，可以通过多种方式实现。具体如下。
在示例性的实施例中，计算机设备为能够快速切割所述草图以获取多个元素的元素信息，所述步骤S100可以包括步骤S200～S202。步骤S200，沿第一方向对所述草图进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；步骤S202，重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
作为示例，所述第一方向为纵向，也就是说，计算机设备以行为单位进行纵向逐行扫描；所述第二方向为横向，也就是说，计算机设备以列为单位进行横向逐列扫描。通过纵向逐行扫描和/或横向逐列扫描以识别出所述草图中的多个草图图案，可以称之为智能行列识别操作。由于用户早已习惯了滚动翻页的模式，因此大部分的网页都是采用限定最大宽度，然后滚动翻页的设计。因此，智能行列识别操作默认遵循先行后列的顺序，当然这个优先次序也可以根据需要调整。作为示例，如图3所示，计算机设备可以将示例性草图从上往下进行逐行扫描，以将所述示例性草图分割为三个区域，从而对应的创建与这三个区域一一对应的三个元素
在示例性的实施例中，计算机设备为能够快速切割所述草图以得到所述多个原子区域，如图4所示，所述步骤S100可以包括步骤S400～S408：步骤S400、裁剪所述草图中的边缘空白区域，得到所述草图中的待处理区域。步骤S402、沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素。步骤S404、重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素。其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。在该示例性实施例中，如图3所示，计算机设备通过裁剪示例性草图中的边缘空白区域得到图3中的变化图1，可以得到更确切的UI设计布局和各个草图图案更确切的位置和尺寸，以得到更确切的网页布局和各个元素更确切的位置和尺寸。
需要说明的是，“分割操作”不可能永远循环下去，总会在某次分割操作之后，就不可再循环分割了。在本实施例中，i是一个自变量，j是i在最后一次分割操作时的那个值，即在第j次分割操作之后，就不可再分割了，即此时已经分割得到了所述草图中所有的原子区域。
作为示例，通过第一次分割操作得到一个区域A，并基于该区域A创建元素B；如果该区域A在第二分割操作中可以继续被分割为区域A1、A2，则基于所述区域A1创建元素B1、基于所述区域A2创建元素B2。其中，所述元素B和所述元素B1、B2之间是父子关系，该父子关系会被记录在所述元素B、B1、B2的元素信息中。
作为示例，如图3所示的示例性草图，计算机设备可以去除示例性草图的边缘空白区域以得到所述示例性草图的待处理区域，接下来就是解析页面布局结构：首先创建一个元素拿到所述待处理区域的图像数据，从最上边开始向下逐行像素解析，当遇到第一个空白像素行时暂停，然后根据空白行之上的图像信息创建一个新的元素对象，然后继续解析直到遇到下一个空白像素行或最后一行。
在示例性的实施例中，由于设计师在页面设计过程中会加入一些修饰性元素，这部分开发人员一般会用背景图片或CSS来实现，而这部分的内容由于形状的不规则性，对于现有的这些将设计稿转化为代码的转换工具而言，无疑带来了不小的挑战。本实施例通过背景识别技术，能够将主要元素从繁复的背景中抽取出来，从而解决掉大部分类似问题，提高识别率。计算机设备为能够快速切割所述草图以得到所述多个原子区域，如图5所示，所述步骤S100可以包括步骤S500～S510：步骤S500、处理所述草图的背景颜色，以得到处理后的草图；步骤S502、裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域；步骤S504、沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；步骤S506、重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素。其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
在示例性的实施例中，如图6所示，所述处理所述草图的背景颜色以得到处理后的草图，可以通过步骤S600～S604实现：其中，步骤S600，获取所述草图中各个像素的像素颜色信息；步骤S602，根据预设颜色信息和所述各个像素的像素颜色信息，确定所述草图中的多个背景像素；步骤S604，将所述多个背景像素的像素颜色调整为单一颜色，以清理所述草图的背景颜色。
作为示例，计算机设备可以通过Canvas识别所述草图。具体实现可以如下：在Canvas中，计算机设备可以通过getImageData()方法读取指定位置像素点的色值信息；计算该色值和给定背景颜色色值的差异值；如果该差异值在预先给定阈值内，则认为该像素点是背景像素；如果该差异值不在预先给定阈值内，则认为该像素点是非背景像素(即，元素像素)。具体而言，getImageData()方法返回的ImageData对象的data属性中以数组形式存放该像素的RGBA值，即[R-红色(0-255)，G-绿色(0-255)，B-蓝色(0-255)，A-alpha通道(0-255；0是透明的，255是完全可见的)]，计算机设备可以计算getImageData()方法返回的RGBA和所述给定背景颜色色值的RGBA之间的差值，确定该差值否在给定范围内。
在示例性的实施例中，如图7所示，步骤S502可以通过步骤S700～S710实现：其中，步骤S700，从所述处理后的草图的上边缘起始，从上向下扫描所述处理后的草图，直至扫描到包括非空白像素的第M行；步骤S702，从所述处理后的草图的下边缘起始，从下向上扫描所述处理后的草图，直至扫描到包括非空白像素的第N行；步骤S704，从所述处理后的草图的左边缘起始，从左向右扫描所述处理后的草图，直至扫描到包括非空白像素的第P列；步骤S706，从所述处理后的草图的右边缘起始，从右向左扫描所述处理后的草图，直至扫描到包括非空白像素的第Q列；步骤S708，根据所述处理后的草图中的第M行、第N行、第P列和第Q列，确定所述处理后的草图中的边缘空白区域；步骤S710，裁剪所述处理后的草图中的所述边缘空白区域，以得到所述待处理区域。
通过上述的智能行列识别法，得到了多个原子区域，每个原子区域中对应有一个草图图案，草图图案的位置、尺寸等信息，会直接影响到与之对应的元素的位置、尺寸信息。当这个草图图案周围还有空白区域时，则会影响到对应元素的outer:{yStart，yEnd，xStart，xEnd}，因此有必要进行元素空白去除操作，以提升对应元素的上述信息的准确性，即提升页面布局的准确性。在示例性的实施例中，如图8所示，还包括如下步骤：步骤S800，在每个原子区域中提取出一个最小矩形区域；步骤S802，将每个原子区域中的最小矩形区域的位置信息确定为每个原子区域的相应元素的位置信息。所述最小矩形区域是指用于容纳相应原子区域中的草图图案的最小矩形区域；该最小矩形区域的第一边方向对应于所述第一方向，且第二边方向对应于所述第二方向。
作为示例，如图9所示，计算机设备要要确定一个元素确切的位置及尺寸，需要先去除这个元素在所述草图中对应的草图图案周边的空白去除。在本实施例中，空白去除操作可以如下：按照先上后下，先左后右的顺序依次去掉空白像素，从而得到这个元素真实尺寸。需要说明的是，由于页面元素的尺寸大都是由元素的宽度和高度决定，也即其所占据的区域大多以矩形方式出现，因此去除空白的方法并不是以直观的去除元素周边所有空白为准(见上图最后一张)，而是保留能够框住元素的最小矩形为准。在具体操作中对于上部的空白，以行的形式从最上边向下面逐行判断是否属于背景，是则继续，否则表示上部空白去除完毕。对于下部空白，判断方法和上部一致，只是方向是从最下一行向上逐行判断。对于左边的空白，以列的形式从最左边向右边逐列判断是否属于背景，是则继续，否则表示左边空白去除完毕。右边空白判断规则和左边一致，只是方向是从右向左。
在示例性的实施例中，如前文所示，网页可能包括不同种类的多个元素，所述多个元素可能包括一些基本元素(如，按钮、输入框、图片、段落)和一些由基本组成的复杂元素(如，对话框、地域选择器)。面对所述草图中具有表格元素或者具有表格中嵌套表格的情形，现有技术的识别率往往很低、且无法完整识别、识别速度慢、操作配置复杂、学习成本比较高，而且生成的网页代码可读性不高，缺乏语义组织。为解决上述缺陷，如图10所示，所述步骤S100可以还包括步骤S1000～S1002。为了方面表示，下面以所述多个元素中的第一元素为例，所述第一元素对应于第一原子区域，该第一原子区域对应有第一最小矩形区域(即能够框住该第一原子区域中的草图图案的最小矩形区域)。步骤S1000，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，所述容器元素包括普通容器元素和表格元素；步骤S1002，如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素。
判断所述第一元素是否为容器元素可以由多个实现方式。如以下提供的两种示例性方式：
示例性方式一：如图11所示，所述步骤S1000可以还包括步骤S1100～S1102。步骤S1100，获取所述第一最小矩形区域内部的空白区域在所述第一最小矩形区域中的占比；步骤S1102，如果所述占比大于预设阈值，则确定所述第一元素是容器元素；步骤S1104，如果所述占比没有大于所述预设阈值，则确定所述第一元素不是所述容器元素。
示例性方式二：如图12所示，所述步骤S1000可以还包括步骤S1200～S1202。步骤S1200，获取所述第一最小矩形区域的其中一个或多个样本行中的空白像素占比或一个或多个样本列中的空白像素占比；步骤S1202，如果所述一个或多个样本行中的空白像素占比大于所述预设阈值或所述一个或多个样本列中的空白像素占比大于所述预设阈值，则确定所述第一元素是容器元素。
其中，如图13所示，步骤S1202可以通过如下步骤实现：步骤S1300，获取所述样本行中非空白像素的数量，所述非空白像素的数量包括位于所述样本行第一端的连续非空白像素的个数以及位于所述样本行第二端的连续非空白像素的个数；步骤S1302，根据所述样本行中非空白像素的数量和所述样本行中所有像素的数量，获取所述样本行中的非空白像素的数量占比。
如图14所示，步骤S1202还可以通过如下步骤实现：步骤S1400，获取所述样本列中非空白像素的数量，所述非空白像素的数量包括位于所述样本列第一端的连续非空白像素的个数以及位于所述样本列第二端的连续非空白像素的个数；步骤S1402，根据所述样本列中非空白像素的数量和所述样本列中所有像素的数量，获取所述样本列中的非空白像素的数量占比。
上述示例性方式一和示例性方式二，又可以称之为容器识别操作。
为了便于理解，以下结合图15对示例性方式二进行介绍。所述第一元素是否是容器元素，取决于所述第一元素是否有子元素。如何判断所述第一元素有无子元素？通常子元素和容器元素之间会存在作为隔断的空白区域。即，如果所述第一元素内部不存在空白部分，那么这个元素类似图片的元素，而不是容器元素。因此，计算机设备可以通过判断第一元素内部的空白区域占比来判断所述第一元素是否是容器元素。考虑到遍历元素内部所有像素需要消耗大量计算资源，因此本实施例采用了多次抽样的方法来判断所述第一元素是否是容器元素。具体操作可以如下：从横向、纵向分别抽样四次，只要有一次空白部分占比超过指定阈值，则认为该第一元素是容器元素。需要说明的是，就是对单次取样的判断遵循这样的原则：a.通过所述第一元素对应的第一原子区域(即，能够)进行判断；b.分别从第一原子区域的两端获取连续非空白元素，遇到空白像素即停止获取；c.计算获取的两端非空白像素占整行或整列的像素数量占比。
在示例性的实施例中，如图16所述，所述步骤S1002可以包括步骤S1600～S1606。步骤S1600，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；步骤S1602，沿所述第一方向或所述第二方向，对所述第一无边框最小矩形区域进行扫描，以确定所述第一无边框最小矩形区域是否能够被分割；步骤S1604，如果所述第一无边框最小矩形区域能够被分割，则确定所述第一元素为所述表格元素；步骤S1606，如果所述第一无边框最小矩形区域不能够被分割，则确定所述第一元素为所述普通容器元素。
步骤S1600～S1606为表格识别操作。
目前将草图转化为HTML代码的技术，在处理嵌套表格都会遇到一些难题。这是因为表格是一个特殊的容器元素，同时拥有横向和竖向两个维度，同时表格中的单元格内部还可以继续含有子元素，使得进一步下探识别加大了难度。同时表格的边框的宽度又不是一成不变，这对表格的结构判断也带来了挑战。本发明实施例独特的表格识别算法结合智能行列识别算法，能够解决该难度，成功实现对嵌套表格的解析。
具体而言，对于表格元素的识别，本实施例是先去除容器元素的边框，然后再进行行列识别，如果行数或列数等于或大于1，则认为是表格元素，反之则认为是普通容器元素。需要说明的是，这里的识别规则和前面提到先行后列的解析模式是有关联的，例如：对于一行多列的情况，如果是先列后行的解析模式，则可以正常解析，但如果是先行后列的解析模式，则会因为只有一行，将会被归结为普通容器元素。因此这里需要做一个特殊判断，即先行后列的模式下，对于只有一行的情况需要继续做列的解析，如解析后只有一列，则认为是普通容器元素，如果多于一列，则认为是表格元素。同样先列后行的解析模式也需要特殊处理，一列多行的情况。
去除所述第一最小矩形区域中的元素边框，可以由多个实现方式。如以下提供的两种示例性方式：
示例性方式一，如图17所示：步骤S1700，以从边缘到中心的方向，探测所述第一最小矩形区域中的多个连续非空白像素；其中，每个连续非空白像素与所述多个连续非空白像素中的至少一个其他连续非空白像素是相邻的且与这个其他连续非空白像素之间的颜色差异在预设范围之内；步骤S1702，将所述多个连续非空白像素构成的非空白像素区域确定为所述元素边框；步骤S1704，将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
示例性方式二，如图18所示：步骤S1800，从所述第一最小矩形区域的左边缘起始，从左向右读取所述第一最小矩形区域的第一组连续非空白像素；步骤S1702，从所述第一最小矩形区域的右边缘起始，从右向左读取所述第一最小矩形区域的第二组连续非空白像素；步骤S1804，从所述第一最小矩形区域的下边缘起始，从下向上读取所述第一最小矩形区域的第三组连续非空白像素；步骤S1806，从所述第一最小矩形区域的上边缘起始，从上向下读取所述第一最小矩形区域的第四组连续非空白像素；步骤S1808，根据所述第一、第二、第三和第四组连续非空白像素，确定所述元素边框；步骤S1810，将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
上述示例性方式一和示例性方式二，又可以称之为边框识别操作。
有时候为了增加不同元素之间的识别度，或者为了美观会用边框和花边将元素框起来，这种方式也给识别带来了一些难度。一方面边缘的不规则使得判断哪部分是装饰哪部分是内容难以判断，另一方面边框部分对内部元素的位置定位也带来了一些挑战。本实施例通过边框识别算法，能够将元素边框和内容部分区分开来，为后面识别子元素做了很好的前期准备。
为了便于理解，以下结合图19对示例性方式二进行介绍。一个容器元素通常可以分为元素边框和内部元素两部分。为了确定内部元素的总尺寸和大小，需要把元素边框这部分的占比减去才能得到内部元素的总尺寸和大小。本实施例中识别边框部分的算法是：从上下左右四个方向，分四次，由外向内读取连续非空白像素直至结束，即可识别出元素边框的部分。具体而言，通常1个中心像素点周围会环绕着8个像素点，如果这8个像素点有和中心像素点颜色相同或相近(即差异小于给定阈值)的像素点，则认为这些颜色相同或相近的像素点和中心像素点是连续的。
示例性方式一，利用较少计算资源即可探测到元素边框；
示例性方式二，如果元素边框是由此次独立割裂开的多个边框部分构成的，示例性方式二可以防止示例性方式一边框识别不全的问题。
在示例性的实施例中，如图20所述，所述步骤S1602可以包括步骤S2000～S2002。其中：步骤S2000，判断所述第一无边框最小矩形区域是否包括一个或多个空白像素组；其中，所述空白像素组包括空白像素行、多个连续空白像素行、空白像素列或多个连续空白像素列；步骤S2002，如果所述第一无边框最小矩形区域包括一个或多个空白像素组，则确定所述第一无边框最小矩形区域能够被分割。“空白像素行”解释如下：第一无边框最小矩形区域的有这样一个像素行，这个像素行其中一端在所述第一无边框最小矩形区域的其中一个左边缘，这个像素行的另一端在所述第一无边框最小矩形区域的右边缘，如果这个像素行的整行都是由空白像素构成的，则这个像素行即是空白像素行。所述空白像素列也做类同理解，本文不再赘述。
在示例性的实施例中，如图21所述，还包括步骤S1004：如果所述第一元素为所述表格元素，则从所述第一原子区域中获取多个子元素。
在示例性的实施例中，如图22所述，所述步骤S1004可以包括步骤S2200～S2204。步骤S2200，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；步骤S2202，沿所述第一方向或第二方向，对所述第一无边框最小矩形区域进行扫描，以分割得到多个子元素区域；所述每个子元素区域均为用于容纳相应的子元素图案的最小矩形区域；步骤S2204，为每个子元素区域分别生成相应的子元素，以得到所述第一最小矩形区域的所述多个子元素。
在示例性的实施例中，如图23所示，所述步骤S1004可以包括步骤S2300～S2304。步骤S2300，判断所述多个子元素区域沿所述第一方向或所述第二方向是否是单一排列的；步骤S2302，如果所述述多个子元素区域沿所述第一方向或所述第二方向是单一排列的，则将所述多个子元素确定为所述第一元素的子级；步骤S2304，如果所述述多个子元素区域沿所述第一方向或所述第二方向不是单一排列的，则执行以下操作以得到三层元素结构：插入一个新的容器元素；将所述多个子元素确定为所述插入的容器元素的子级；及将所述插入的容器元素确定为所述第一元素的子级。
步骤S2300～S2304为子元素识别操作。
对于容器元素的子元素识别方法步骤如下：a.去除边框b.去除边缘空白区域c.行列识别。需要说明的是，在先行后列的解析模式下，对于容器元素内按纵向单一排列的子元素或先列后行的模式对横向单一排列的子元素，都会作为容器元素的子级。而非单一排列的，则插入一个新的容器元素以形成三层元素结构。
为了方便理解，以下提供一个示例性应用场景，具体如下：
①某个网站有一个支付信息页面，在该页面中用户可以录入订单支付方式相关信息，这些相关信息可以包括：Cardholder Name发卡行名称、Card Number卡号、Expiry Date失效日期、Cvv验证码等信息，因此在白板上绘制了如图24所示的草图。
②计算机设备将需要转换的草图使用PNG或JPEG格式，载入到Canvas中，然后清理背景颜色，包括去除渐变效果，去除污点等，以避免后面对主要元素解析造成影响，然后再进行行列解析，得到页面整体布局，接着再逐一解析页面元素，生成类似DOM的元素语法树，最终再根据语法树生成HTML/CSS代码。
步骤②的具体处理过程如下：
步骤1：加载PNG格式的草图图片；
var img＝new Image()；
img.src＝"demo.png"；
步骤2：将草图图片载入到Canvas中；
var canvas＝document.createElement("canvas")；
document.body.appendChild(canvas)；
var ctx＝canvas.getContext('2d')；
ctx.drawImage(img,0,0)；
步骤3：清理草图图片中的背景颜色，如图25。
步骤4：剪切掉草图图片中的边缘空白区域，如图26；
步骤5：分析各个元素的元素信息，如图27；
步骤6：生成语法树，结构如下：
Figure BDA0002490881640000161
Figure BDA0002490881640000171
步骤7：根据所述语法树，生成HTML/CSS代码。如下：
Figure BDA0002490881640000172
Figure BDA0002490881640000181
Figure BDA0002490881640000191
实施例二
图28示意性示出了根据本申请实施例二的基于草图的网页生成系统的框图，该基于草图的网页生成系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
如图28所示，该基于草图的网页生成系统2800可以包括获取模块2810、第一生成模块2820、第二生成模块2830和第三生成模块1740，其中：
获取模块2810，用于识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案；
第一生成模块2820，用于根据所述多个元素的元素信息，生成语法树；
第二生成模块2830，用于根据所述语法树，生成网页代码；及
第三生成模块2840，用于根据所述网页代码，生成与所述草图对应的目标网页。
在示例性的实施例中，个元素分别通过预先定义的通用元素进行表示，所述每个元素的元素信息是按照所述通用元素的数据结构进行存储的；其中，所述通用元素的数据结构包括多个数据节点，所述多个数据节点包括元素标识、元素外部尺寸、元素内部尺寸、子元素列表数组、元素类型、父元素对象和背景颜色值。
在示例性的实施例中，所述获取模块2810，还用于：基于第一方向和/或第二方向，从所述草图中获取多个原子区域；及为每个原子区域分别生成一个元素，所述元素的元素信息包括相应原子区域在所述草图中的位置信息；其中，所述每个原子区域均为用于容纳相应的草图图案的最小矩形区域；该最小矩形区域的第一边方向对应于所述第一方向，且第二边方向对应于所述第二方向。
在示例性的实施例中，所述获取模块2810，还用于：沿第一方向对所述草图进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
在示例性的实施例中，所述获取模块2810，还用于：裁剪所述草图中的边缘空白区域，得到所述草图中的待处理区域；沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
在示例性的实施例中，所述获取模块2810，还用于：处理所述草图的背景颜色，以得到处理后的草图；裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域；沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
在示例性的实施例中，处理所述草图的背景颜色，以得到处理后的草图，包括：获取所述草图中各个像素的像素颜色信息；根据预设颜色信息和所述各个像素的像素颜色信息，确定所述草图中的多个背景像素；及将所述多个背景像素的像素颜色调整为单一颜色，以清理所述草图的背景颜色。
在示例性的实施例中，裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域，包括：从所述处理后的草图的上边缘起始，从上向下扫描所述处理后的草图，直至扫描到包括非空白像素的第M行；从所述处理后的草图的下边缘起始，从下向上扫描所述处理后的草图，直至扫描到包括非空白像素的第N行；从所述处理后的草图的左边缘起始，从左向右扫描所述处理后的草图，直至扫描到包括非空白像素的第P列；从所述处理后的草图的右边缘起始，从右向左扫描所述处理后的草图，直至扫描到包括非空白像素的第Q列；根据所述处理后的草图中的第M行、第N行、第P列和第Q列，确定所述处理后的草图中的边缘空白区域；及裁剪所述处理后的草图中的所述边缘空白区域，以得到所述待处理区域。
在示例性的实施例中，获取模块2810，还用于：在每个原子区域中提取出一个最小矩形区域；将每个原子区域中的最小矩形区域的位置信息确定为每个原子区域的相应元素的位置信息；所述最小矩形区域是指用于容纳相应原子区域中的草图图案的最小矩形区域；该最小矩形区域的第一边方向对应于所述第一方向，且第二边方向对应于所述第二方向。
在示例性的实施例中，所述多个元素包括第一元素，所述第一元素对应于第一原子区域，所述第一原子区域对应有第一最小矩形区域；识别所述草图以获取多个元素的元素信息，包括：根据所述第一最小矩形区域判断所述第一元素是否为容器元素，所述容器元素包括普通容器元素和表格元素；及如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素。
在示例性的实施例中，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，包括：获取所述第一最小矩形区域内部的空白区域在所述第一最小矩形区域中的占比；如果所述占比大于预设阈值，则确定所述第一元素是容器元素；及如果所述占比没有大于所述预设阈值，则确定所述第一元素不是所述容器元素。
在示例性的实施例中，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，包括：获取所述第一最小矩形区域的其中一个或多个样本行中的空白像素占比或一个或多个样本列中的空白像素占比；及如果所述一个或多个样本行中的空白像素占比大于所述预设阈值或所述一个或多个样本列中的空白像素占比大于所述预设阈值，则确定所述第一元素是容器元素。
在示例性的实施例中，获取所述第一最小矩形区域的其中一个或多个样本行中的空白像素占比或一个或多个样本列中的空白像素占比，包括：获取所述样本行中非空白像素的数量，所述非空白像素的数量包括位于所述样本行第一端的连续非空白像素的个数以及位于所述样本行第二端的连续非空白像素的个数；及根据所述样本行中非空白像素的数量和所述样本行中所有像素的数量，获取所述样本行中的非空白像素的数量占比。
在示例性的实施例中，获取所述第一最小矩形区域的其中一个或多个样本行中的空白像素占比或一个或多个样本列中的空白像素占比，包括：获取所述样本列中非空白像素的数量，所述非空白像素的数量包括位于所述样本列第一端的连续非空白像素的个数以及位于所述样本列第二端的连续非空白像素的个数；及根据所述样本列中非空白像素的数量和所述样本列中所有像素的数量，获取所述样本列中的非空白像素的数量占比。
在示例性的实施例中，如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素，包括：去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；沿所述第一方向或所述第二方向，对所述第一无边框最小矩形区域进行扫描，以确定所述第一无边框最小矩形区域是否能够被分割；如果所述第一无边框最小矩形区域能够被分割，则确定所述第一元素为所述表格元素；及如果所述第一无边框最小矩形区域不能够被分割，则确定所述第一元素为所述普通容器元素。
在示例性的实施例中，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域，包括：以从边缘到中心的方向，探测所述第一最小矩形区域中的多个连续非空白像素；其中，每个连续非空白像素与所述多个连续非空白像素中的至少一个其他连续非空白像素是相邻的且与这个其他连续非空白像素之间的颜色差异在预设范围之内；将所述多个连续非空白像素构成的非空白像素区域确定为所述元素边框；将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
在示例性的实施例中，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域，包括：从所第一最小矩形区域的左边缘起始，从左向右读取所述第一最小矩形区域的第一组连续非空白像素；从所述第一最小矩形区域的右边缘起始，从右向左读取所述第一最小矩形区域的第二组连续非空白像素；从所述第一最小矩形区域的下边缘起始，从下向上读取所述第一最小矩形区域的第三组连续非空白像素；从所述第一最小矩形区域的上边缘起始，从上向下读取所述第一最小矩形区域的第四组连续非空白像素；根据所述第一、第二、第三和第四组连续非空白像素，确定所述元素边框；将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
在示例性的实施例中，确定所述第一无边框最小矩形区域是否能够被分割，包括：判断所述第一无边框最小矩形区域是否包括一个或多个空白像素组；其中，所述空白像素组包括空白像素行、多个连续空白像素行、空白像素列或多个连续空白像素列；及如果所述第一无边框最小矩形区域包括一个或多个空白像素组，则确定所述第一无边框最小矩形区域能够被分割。
在示例性的实施例中，获取模块2810，还用于：如果所述第一元素为所述表格元素，则从所述第一最小矩形区域中获取多个子元素。
在示例性的实施例中，从所述第一最小矩形区域中获取多个子元素，包括：去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；沿所述第一方向或第二方向，对所述第一无边框最小矩形区域进行扫描，以分割得到多个子元素区域；所述每个子元素区域均为用于容纳相应的子元素图案的最小矩形区域；及为每个子元素区域分别生成相应的子元素，以得到所述第一最小矩形区域的所述多个子元素。
在示例性的实施例中，从所述第一最小矩形区域中获取多个子元素，还包括：判断所述多个子元素区域沿所述第一方向或所述第二方向是否是单一排列的；如果所述述多个子元素区域沿所述第一方向或所述第二方向是单一排列的，则将所述多个子元素确定为所述第一元素的子级；及如果所述述多个子元素区域沿所述第一方向或所述第二方向不是单一排列的，则执行以下操作以得到三层元素结构：插入一个新的容器元素；将所述多个子元素确定为所述插入的容器元素的子级；及将所述插入的容器元素确定为所述第一元素的子级。
实施例三
图29示意性示出了根据本申请实施例三的计算机设备的硬件架构示意图。本实施例中，计算机设备是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是智能手机、平板电脑、笔记本电脑、台式计算机、视频会议系统、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)。如图29所示，计算机设备至少包括但不限于：可通过系统总线相互通信链接存储器2910、处理器2920、网络接口2930。其中：
存储器2910至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器2910可以是计算机设备的内部存储模块，例如该计算机设备的硬盘或内存。在另一些实施例中，存储器2910也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(SmartMediaCard，简称为SMC)，安全数字(SecureDigital，简称为SD)卡，闪存卡(FlashCard)等。当然，存储器2910还可以既包括计算机设备的内部存储模块也包括其外部存储设备。本实施例中，存储器2910通常用于存储安装于计算机设备的操作系统和各类应用软件，例如基于草图的网页生成方法的程序代码等。此外，存储器2910还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器2920在一些实施例中可以是中央处理器(CentralProcessingUnit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器2920通常用于控制计算机设备的总体操作，例如执行与计算机设备进行数据交互或者通信相关的控制和处理等。本实施例中，处理器2920用于运行存储器2910中存储的程序代码或者处理数据。
网络接口2930可包括无线网络接口或有线网络接口，该网络接口2930通常用于在计算机设备与其他计算机设备之间建立通信链接。例如，网络接口2930用于通过网络将计算机设备与外部终端相连，在计算机设备与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystemofMobilecommunication，简称为GSM)、宽带码分多址(WidebandCodeDivisionMultipleAccess，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图29仅示出了具有部件2910-2930的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器2910中的基于草图的网页生成方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器2920)所执行，以完成本申请实施例。
实施例四
本申请还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的基于草图的网页生成方法的步骤。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(SmartMediaCard，简称为SMC)，安全数字(SecureDigital，简称为SD)卡，闪存卡(FlashCard)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中基于草图的网页生成方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
最后，为了体现本申请的优势，以下提供几个示例对比对象，以供参考。
第一：Adobe公司推出的Photoshop的切片功能，通过切片功能可以将整个WEB页面切分成一个个小图，并将它们全部放入一个完整表格中，然后导出为HTML+Image的格式，在操作过程中还可以把图像放大，借助参考线以使各个部分尺寸更加准确。不过这种方式有三点不足，1.很难处理嵌套表格，2.只能以图片形式导出，3.导出的HTML代码可读性太差。
第二：由微软和Kabel、Spike Techniques合作开发推出的Sketch2Code。用户将图片上传到Sketch2Code网站上，自定义视觉模型预测在图像中出现的HTML元素，并将它们的位置标出来，手写文本识别服务读取预测元素中的文本，布局算法根据预测元素的边框空间信息生成网格结构，然后由HTML生成引擎使用上述信息来生成HTML代码。和Photoshop相比，Sketch2Code是可以直接导出文本内容，不足之处是边框信息不够准确，且对用边框框起来的子模块识别度不高，同样导出代码的可读性不高。
第三：UIzard公司推出的pix2code。pix2code训练了一个神经网络，能够把图形用户界面的截图转译成代码。跟所有机器学习一样，使用者需要用手头的任务实例去训练模型。主要分三个步骤，首先，通过计算机视觉来理解GUI图像和里面的元素(按钮、条框等)。接下来模型需要理解计算机代码，并且能生成在句法上和语义上都正确的样本。最后把前两步联系起来，需要它用推测场景来生成描述文本。该pix2code实测生成代码的识别准确率不高，并且对草图选择性很强，不同风格的设计识别率差异极大，很难一套系统适应多个场景。同时，pix2code也存在和前面两款工具一样的缺陷，无法识别嵌套表格，生成代码可读性差。
针对上述问题本申请尤其通过特有的行列识别操作、容器识别操作、边框识别操作、表格识别操作和子元素识别操作，以及智能行列布局算法，可以高效解决上述问题。
目前大部分现有技术都采用了绝对定位布局的方式，这是因为计算元素相对于左上角坐标原点的距离的难度要远低于通过相对定位的方式来计算元素的位置和大小。本申请实施例可以采用对开发人员也更为友好的相对定位方式，再结合智能行列识别技术，使转换后的布局更为合理，有利于后期开发人员二次开发。
显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (19)

1.一种基于草图的网页生成方法，其特征在于，所述方法包括：
识别所述草图以获取多个元素的元素信息，每个元素对应所述草图中的一个草图图案；
根据所述多个元素的元素信息，生成语法树；
根据所述语法树，生成网页代码；及
根据所述网页代码，生成与所述草图对应的目标网页。
2.根据权利要求1所述的基于草图的网页生成方法，其特征在于，每个元素分别通过预先定义的通用元素进行表示，所述每个元素的元素信息是按照所述通用元素的数据结构进行存储的；其中，所述通用元素的数据结构包括多个数据节点，所述多个数据节点包括元素标识、元素外部尺寸、元素内部尺寸、子元素列表数组、元素类型、父元素对象和背景颜色值。
3.根据权利要求1所述的基于草图的网页生成方法，其特征在于，识别所述草图以获取多个元素的元素信息，包括：
沿第一方向对所述草图进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；
重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；
其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
4.根据权利要求1所述的基于草图的网页生成方法，其特征在于，识别所述草图以获取多个元素的元素信息，包括：
裁剪所述草图中的边缘空白区域，得到所述草图中的待处理区域；
沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；
重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；
其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
5.根据权利要求1所述的基于草图的网页生成方法，其特征在于，识别所述草图以获取多个元素的元素信息，包括：
处理所述草图的背景颜色，以得到处理后的草图；
裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域；
沿第一方向对所述待处理区域进行第一次分割操作，以得到与所述第一次分割操作得到的多个区域，并为所述第一次分割操作得到的各个区域分别创建一个相应的元素；
重复执行第i次分割操作，直至当i＝j时，从所述草图中分割出所有的原子区域：对所述第i-1次分割操作得到的各个区域分别进行第i次分割操作：将所述第i-1次分割操作得到的多个区域中的不可分割区域确定为相应的原子区域；将所述第i-1次分割操作得到的多个区域中的可分割区域继续执行所述第i次分割操作，以得到与所述第i次分割操作得到的多个区域，并为所述第i次分割操作得到的各个区域分别创建一个相应的元素；
其中，i是初始值为2的正整数；当i为奇数时，所述第i次分割操作是沿所述第一方向进行分割的；当i为偶数时，所述第i次分割操作是沿第二方向进行分割的。
6.根据权利要求5所述的基于草图的网页生成方法，其特征在于，裁剪所述处理后的草图中的边缘空白区域，得到所述处理后的草图中的待处理区域，包括：
从所述处理后的草图的上边缘起始，从上向下扫描所述处理后的草图，直至扫描到包括非空白像素的第M行；
从所述处理后的草图的下边缘起始，从下向上扫描所述处理后的草图，直至扫描到包括非空白像素的第N行；
从所述处理后的草图的左边缘起始，从左向右扫描所述处理后的草图，直至扫描到包括非空白像素的第P列；
从所述处理后的草图的右边缘起始，从右向左扫描所述处理后的草图，直至扫描到包括非空白像素的第Q列；
根据所述处理后的草图中的第M行、第N行、第P列和第Q列，确定所述处理后的草图中的边缘空白区域；及
裁剪所述处理后的草图中的所述边缘空白区域，以得到所述待处理区域。
7.根据权利要求3～5任意一项所述的基于草图的网页生成方法，其特征在于，还包括：
在每个原子区域中提取出一个最小矩形区域；
将每个原子区域中的最小矩形区域的位置信息确定为每个原子区域的相应元素的位置信息；
所述最小矩形区域是指用于容纳相应原子区域中的草图图案的最小矩形区域；该最小矩形区域的第一边方向对应于所述第一方向，且第二边方向对应于所述第二方向。
8.根据权利要求3～5所述的基于草图的网页生成方法，其特征在于，所述多个元素包括第一元素，所述第一元素对应于第一原子区域，所述第一原子区域对应有第一最小矩形区域；
识别所述草图以获取多个元素的元素信息，包括：
根据所述第一最小矩形区域判断所述第一元素是否为容器元素，所述容器元素包括普通容器元素和表格元素；及
如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素。
9.根据权利要求8所述的基于草图的网页生成方法，其特征在于，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，包括：
获取所述第一最小矩形区域内部的空白区域在所述第一最小矩形区域中的占比；
如果所述占比大于预设阈值，则确定所述第一元素是容器元素；及
如果所述占比没有大于所述预设阈值，则确定所述第一元素不是所述容器元素。
10.根据权利要求8所述的基于草图的网页生成方法，其特征在于，根据所述第一最小矩形区域判断所述第一元素是否为容器元素，包括：
获取所述第一最小矩形区域的其中一个或多个样本行中的空白像素占比或一个或多个样本列中的空白像素占比；及
如果所述一个或多个样本行中的空白像素占比大于所述预设阈值或所述一个或多个样本列中的空白像素占比大于所述预设阈值，则确定所述第一元素是容器元素。
11.根据权利要求8所述的基于草图的网页生成方法，其特征在于，如果确定所述第一元素为所述容器元素，则判断所述第一元素是否为表格元素，包括：
去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；
沿所述第一方向或所述第二方向，对所述第一无边框最小矩形区域进行扫描，以确定所述第一无边框最小矩形区域是否能够被分割；
如果所述第一无边框最小矩形区域能够被分割，则确定所述第一元素为所述表格元素；及
如果所述第一无边框最小矩形区域不能够被分割，则确定所述第一元素为所述普通容器元素。
12.根据权利要求11所述的基于草图的网页生成方法，其特征在于，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域，包括：
以从边缘到中心的方向，探测所述第一最小矩形区域中的多个连续非空白像素；其中，每个连续非空白像素与所述多个连续非空白像素中的至少一个其他连续非空白像素是相邻的且与这个其他连续非空白像素之间的颜色差异在预设范围之内；
将所述多个连续非空白像素构成的非空白像素区域确定为所述元素边框；
将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
13.根据权利要求11所述的基于草图的网页生成方法，其特征在于，去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域，包括：
从所第一最小矩形区域的左边缘起始，从左向右读取所述第一最小矩形区域的第一组连续非空白像素；
从所述第一最小矩形区域的右边缘起始，从右向左读取所述第一最小矩形区域的第二组连续非空白像素；
从所述第一最小矩形区域的下边缘起始，从下向上读取所述第一最小矩形区域的第三组连续非空白像素；
从所述第一最小矩形区域的上边缘起始，从上向下读取所述第一最小矩形区域的第四组连续非空白像素；
根据所述第一、第二、第三和第四组连续非空白像素，确定所述元素边框；
将所述元素边框从所述第一最小矩形区域中去除，以得到所述第一无边框最小矩形区域。
14.根据权利要求11所述的基于草图的网页生成方法，其特征在于，确定所述第一无边框最小矩形区域是否能够被分割，包括：
判断所述第一无边框最小矩形区域是否包括一个或多个空白像素组；其中，所述空白像素组包括空白像素行、多个连续空白像素行、空白像素列或多个连续空白像素列；及
如果所述第一无边框最小矩形区域包括一个或多个空白像素组，则确定所述第一无边框最小矩形区域能够被分割。
15.根据权利要求8所述的基于草图的网页生成方法，其特征在于，还包括：
如果所述第一元素为所述表格元素，则从所述第一最小矩形区域中获取多个子元素。
16.根据权利要求15所述的基于草图的网页生成方法，其特征在于，从所述第一最小矩形区域中获取多个子元素，包括：
去除所述第一最小矩形区域中的元素边框，以得到第一无边框最小矩形区域；
沿所述第一方向或第二方向，对所述第一无边框最小矩形区域进行扫描，以分割得到多个子元素区域；所述每个子元素区域均为用于容纳相应的子元素图案的最小矩形区域；及
为每个子元素区域分别生成相应的子元素，以得到所述第一最小矩形区域的所述多个子元素。
17.根据权利要求16所述的基于草图的网页生成方法，其特征在于，从所述第一最小矩形区域中获取多个子元素，还包括：
判断所述多个子元素区域沿所述第一方向或所述第二方向是否是单一排列的；
如果所述述多个子元素区域沿所述第一方向或所述第二方向是单一排列的，则将所述多个子元素确定为所述第一元素的子级；及
如果所述述多个子元素区域沿所述第一方向或所述第二方向不是单一排列的，则执行以下操作以得到三层元素结构：插入一个新的容器元素；将所述多个子元素确定为所述插入的容器元素的子级；及将所述插入的容器元素确定为所述第一元素的子级。
18.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时用于实现权利要求1～17中任一项所述的基于草图的网页生成方法的步骤。
19.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行权利要求1～17中任一项所述的基于草图的网页生成方法的步骤。
CN202010404755.3A 2020-05-14 2020-05-14 基于草图的网页生成方法和系统 Active CN112416340B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010404755.3A CN112416340B (zh) 2020-05-14 2020-05-14 基于草图的网页生成方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010404755.3A CN112416340B (zh) 2020-05-14 2020-05-14 基于草图的网页生成方法和系统

Publications (2)

Publication Number Publication Date
CN112416340A true CN112416340A (zh) 2021-02-26
CN112416340B CN112416340B (zh) 2024-08-02

Family

ID=74844143

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010404755.3A Active CN112416340B (zh) 2020-05-14 2020-05-14 基于草图的网页生成方法和系统

Country Status (1)

Country Link
CN (1) CN112416340B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113486102A (zh) * 2021-07-05 2021-10-08 成都运达科技股份有限公司 一种站场示意图配置方法及配置系统
CN117573118A (zh) * 2023-11-16 2024-02-20 南京数睿数据科技有限公司 基于草图识别的应用页面生成方法、装置和电子设备

Citations (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102622448A (zh) * 2012-03-26 2012-08-01 中山大学 一种数字电视互动应用页面标记语言解析方法
US8522212B1 (en) * 2010-07-21 2013-08-27 Google Inc. Auto generation of test utility bots using compile time heuristics of user interface source code
CN106569824A (zh) * 2016-11-07 2017-04-19 腾讯科技（深圳）有限公司 页面数据编译的方法和装置、页面渲染的方法和装置
US20170277665A1 (en) * 2016-03-23 2017-09-28 International Business Machines Corporation Free form website structure design
CN108681529A (zh) * 2018-03-26 2018-10-19 山东科技大学 一种流程模型图的多语言文本及语音生成方法
US20180357055A1 (en) * 2017-06-07 2018-12-13 Syntel, Inc. System and method for computer language migration
CN109241484A (zh) * 2018-09-06 2019-01-18 平安科技（深圳）有限公司 一种基于加密技术的网页数据的发送方法及设备
CN109343845A (zh) * 2018-08-14 2019-02-15 北京奇艺世纪科技有限公司 一种代码文件生成方法和装置
CN109783094A (zh) * 2018-12-15 2019-05-21 深圳壹账通智能科技有限公司 前端页面生成方法、装置、计算机设备及存储介质
CN110309629A (zh) * 2019-06-18 2019-10-08 阿里巴巴集团控股有限公司 一种网页代码加固方法、装置及设备
CN110321126A (zh) * 2019-07-08 2019-10-11 北京三快在线科技有限公司 生成页面代码的方法和装置
CN110598634A (zh) * 2019-09-12 2019-12-20 山东文多网络科技有限公司 一种基于图例库的机房草图识别方法及其装置
CN110766697A (zh) * 2019-10-16 2020-02-07 南京大学 一种界面草图的图形界面控件图像识别的方法和装置
CN110853039A (zh) * 2019-10-16 2020-02-28 深圳信息职业技术学院 一种多数据融合的草图图像分割方法、系统、装置及存储介质
CN110889854A (zh) * 2019-10-16 2020-03-17 深圳信息职业技术学院 一种基于多尺度深度学习的草图部件分割方法、系统、装置及存储介质
CN110928540A (zh) * 2018-09-19 2020-03-27 北京国双科技有限公司 一种页面生成方法及装置

Patent Citations (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8522212B1 (en) * 2010-07-21 2013-08-27 Google Inc. Auto generation of test utility bots using compile time heuristics of user interface source code
CN102622448A (zh) * 2012-03-26 2012-08-01 中山大学 一种数字电视互动应用页面标记语言解析方法
US20170277665A1 (en) * 2016-03-23 2017-09-28 International Business Machines Corporation Free form website structure design
CN106569824A (zh) * 2016-11-07 2017-04-19 腾讯科技（深圳）有限公司 页面数据编译的方法和装置、页面渲染的方法和装置
US20180357055A1 (en) * 2017-06-07 2018-12-13 Syntel, Inc. System and method for computer language migration
CN108681529A (zh) * 2018-03-26 2018-10-19 山东科技大学 一种流程模型图的多语言文本及语音生成方法
CN109343845A (zh) * 2018-08-14 2019-02-15 北京奇艺世纪科技有限公司 一种代码文件生成方法和装置
CN109241484A (zh) * 2018-09-06 2019-01-18 平安科技（深圳）有限公司 一种基于加密技术的网页数据的发送方法及设备
CN110928540A (zh) * 2018-09-19 2020-03-27 北京国双科技有限公司 一种页面生成方法及装置
CN109783094A (zh) * 2018-12-15 2019-05-21 深圳壹账通智能科技有限公司 前端页面生成方法、装置、计算机设备及存储介质
CN110309629A (zh) * 2019-06-18 2019-10-08 阿里巴巴集团控股有限公司 一种网页代码加固方法、装置及设备
CN110321126A (zh) * 2019-07-08 2019-10-11 北京三快在线科技有限公司 生成页面代码的方法和装置
CN110598634A (zh) * 2019-09-12 2019-12-20 山东文多网络科技有限公司 一种基于图例库的机房草图识别方法及其装置
CN110766697A (zh) * 2019-10-16 2020-02-07 南京大学 一种界面草图的图形界面控件图像识别的方法和装置
CN110853039A (zh) * 2019-10-16 2020-02-28 深圳信息职业技术学院 一种多数据融合的草图图像分割方法、系统、装置及存储介质
CN110889854A (zh) * 2019-10-16 2020-03-17 深圳信息职业技术学院 一种基于多尺度深度学习的草图部件分割方法、系统、装置及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
（美）（B.W.克尼汉）BRIAN W.KERNIGHAN，（美）（R.派克）ROB PIKE著；裘宗燕译: "程序设计实践", 31 August 2000, 机械工业出版社 , pages: 1 *
老农、刘浩杨: ".NET Core 底层入门", 31 January 2020, 北京航空航天大学出版社, pages: 1 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113486102A (zh) * 2021-07-05 2021-10-08 成都运达科技股份有限公司 一种站场示意图配置方法及配置系统
CN117573118A (zh) * 2023-11-16 2024-02-20 南京数睿数据科技有限公司 基于草图识别的应用页面生成方法、装置和电子设备
CN117573118B (zh) * 2023-11-16 2024-06-11 南京数睿数据科技有限公司 基于草图识别的应用页面生成方法、装置和电子设备

Also Published As

Publication number Publication date
CN112416340B (zh) 2024-08-02

Similar Documents

Publication Publication Date Title
WO2020192391A1 (zh) 基于ocr的图像转档方法、装置、设备及可读存储介质
Murrell R graphics
US8718364B2 (en) Apparatus and method for digitizing documents with extracted region data
US20180114097A1 (en) Font Attributes for Font Recognition and Similarity
US20130191732A1 (en) Fixed Format Document Conversion Engine
CN110516221B (zh) 提取pdf文档中图表数据的方法、设备和存储介质
US20150135047A1 (en) Vector graphics classification engine
CN110096275B (zh) 一种页面处理方法及装置
CN112416340B (zh) 基于草图的网页生成方法和系统
CN106776994B (zh) 一种工程符号在工程报表和网页中的应用方法及系统
CN105956133B (zh) 智能终端上显示文件的方法及装置
CN115659917A (zh) 一种文档版式还原方法、装置、电子设备及存储设备
US20130124684A1 (en) Visual separator detection in web pages using code analysis
US7027071B2 (en) Selecting elements from an electronic document
CN111190519A (zh) 一种文件及其控件的处理方法、装置、设备和存储介质
US11055526B2 (en) Method, system and apparatus for processing a page of a document
CN113936187A (zh) 文本图像合成方法、装置、存储介质及电子设备
CN112395834B (zh) 基于图片输入的脑图生成方法、装置、设备及存储介质
CN115268904A (zh) 一种用户界面设计文件生成方法、装置、设备及介质
JP2013254321A (ja) 画像処理装置、画像処理方法及びプログラム
CN115373658A (zh) 一种基于Web图片的前端代码自动生成方法和装置
JP5159588B2 (ja) 画像処理装置、画像処理方法、コンピュータプログラム
KR20040090867A (ko) 그레비티 레이어 방식을 이용한 ｘｓｌ 스타일 시트의자동 생성 방법
US20130104014A1 (en) Viewer unit, server unit, display control method, digital comic editing method and non-transitory computer-readable medium
CN114494303B (zh) Pdf版面分割方法和装置、电子设备、存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant