页面样式自动匹配方法及系统的制作方法
【技术领域】
[0001]本发明涉及计算机应用技术领域，特别涉及一种页面样式自动匹配方法及系统。
【背景技术】
[0002]目前有很多html5生成的某一(如积分、统计、社区等)功能的页面集，可直接集成至各类应用程序(APP)中，节省APP的开发成本。
[0003]但集成的html5页面与原APP页面的风格往往不尽相同，相关技术中，包括两种解决办法，一种是在集成中针对不同客户端风格，进行额外开发，增加了工作量，比较麻烦；另一种是事先给出几套风格样式，供集成方选择，不能很好的实现风格完全统一，而且需要提供多套，对于提供方来说，成本增加。
【发明内容】
[0004]本发明旨在至少解决上述技术问题之一。
[0005]为此，本发明的一个目的在于提出一种页面样式自动匹配方法。该方法可以将待集成至所述目标应用中的页面转换成与目标应用的页面图片具有同一风格的样式，提高了集成效率以及降低开发成本。
[0006]本发明的另一个目的在于提出一种页面样式自动匹配系统。
[0007]为了实现上述目的，本发明的第一方面的实施例公开了一种页面样式自动匹配方法，包括以下步骤:接收目标应用的页面图片；提取所述页面图片中多个像素点的颜色值，根据所述多个像素点的颜色值将所述页面图片划分为多个目标区域；分别根据所述多个目标区域中对应于每个目标区域的多个像素点的颜色值确定每个目标区域的色调风格；根据所述多个目标区域中每个目标区域的色调风格对待集成至所述目标应用中的页面进行样式匹配。
[0008]根据本发明实施例的页面样式自动匹配方法可以将待集成至所述目标应用中的页面转换成与目标应用的页面图片具有同一风格的样式，提高了集成效率以及降低开发成本。
[0009]进一步地，所述多个目标区域包括导航区域、主体区域和标题区域，所述提取所述页面图片中多个像素点的颜色值，根据所述多个像素点的颜色值将所述页面图片划分为多个目标区域，包括:当所述页面图片中相邻两行对应的多个像素点的颜色值发生突变时，根据突变位置确定所述导航区域、主体区域和标题区域。
[0010]进一步地，通过如下方式确定所述页面图片中相邻两行对应的多个像素点的颜色值是否发生突变，包括:当所述页面图片中相邻两行对应的多个像素点的颜色值不同时，获取颜色值不同的像素点的数量；根据所述颜色值不同的像素点的数量确定出所述页面图片中相邻两行对应的多个像素点的颜色值是否发生突变。
[0011]进一步地，所述分别根据所述多个目标区域中对应于每个目标区域的多个像素点的颜色值确定每个目标区域的色调风格，包括:计算每个目标区域中颜色相同的像素点的数量；根据颜色相同的像素点的数量确定所述目标区域的色调风格。
[0012]进一步地，所述页面图片为侧滑版页面图片，则进一步接收目标应用的导航页面；计算所述导航页面的色调风格；根据所述导航页面的色调风格对待集成至所述目标应用中的页面进行进一步的样式匹配。
[0013]本发明第二方面的实施例公开了一种页面样式自动匹配系统，包括:接收模块，用于接收目标应用的页面图片；划分模块，用于提取所述页面图片中多个像素点的颜色值，根据所述多个像素点的颜色值将所述页面图片划分为多个目标区域；风格确定模块，用于分别根据所述多个目标区域中对应于每个目标区域的多个像素点的颜色值确定每个目标区域的色调风格；匹配模块，用于根据所述多个目标区域中每个目标区域的色调风格对待集成至所述目标应用中的页面进行样式匹配。
[0014]根据本发明实施例的页面样式自动匹配系统可以将待集成至所述目标应用中的页面转换成与目标应用的页面图片具有同一风格的样式，提高了集成效率以及降低开发成本。
[0015]进一步地，所述多个目标区域包括导航区域、主体区域和标题区域，所述划分模块用于:当所述页面图片中相邻两行对应的多个像素点的颜色值发生突变时，根据突变位置确定所述导航区域、主体区域和标题区域。
[0016]进一步地，所述划分模块通过如下方式确定所述页面图片中相邻两行对应的多个像素点的颜色值是否发生突变，包括:当所述页面图片中相邻两行对应的多个像素点的颜色值不同时，获取颜色值不同的像素点的数量；根据所述颜色值不同的像素点的数量确定出所述页面图片中相邻两行对应的多个像素点的颜色值是否发生突变。
[0017]进一步地，所述风格确定模块用于:计算每个目标区域中颜色相同的像素点的数量；根据颜色相同的像素点的数量确定所述目标区域的色调风格。
[0018]进一步地，所述页面图片为侧滑版页面图片，则所述接收模块进一步接收目标应用的导航页面；所述风格确定模块还用于计算所述导航页面的色调风格；所述匹配模块还用于根据所述导航页面的色调风格对待集成至所述目标应用中的页面进行进一步的样式匹配。
[0019]本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
【附图说明】
[0020]本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中:
[0021]图1是根据本发明一个实施例的页面样式自动匹配方法的流程图；
[0022]图2是根据本发明另一个实施例的页面样式自动匹配方法中目标应用的页面图片的示意图；以及
[0023]图3是根据本发明一个实施例的页面样式自动匹配系统的结构框图。
【具体实施方式】
[0024]下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。
[0025]在本发明的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。
[0026]在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
[0027]以下结合附图描述根据本发明实施例的页面样式自动匹配方法及系统。
[0028]图1是根据本发明一个实施例的页面样式自动匹配方法的流程图。如图1所示，根据本发明一个实施例的页面样式自动匹配方法，包括如下步骤:
[0029]S101:接收目标应用的页面图片。例如使用者上传目标应用(即:应用程序APP)的首页面的页面图片。如图2左侧部分所示。
[0030]S102:提取页面图片中多个像素点的颜色值，根据多个像素点的颜色值将页面图片划分为多个目标区域。
[0031]其中，多个目标区域包括导航区域、主体区域和标题区域，提取页面图片中多个像素点的颜色值，根据多个像素点的颜色值将页面图片划分为多个目标区域，包括:当页面图片中相邻两行对应的多个像素点的颜色值发生突变时，根据突变位置确定导航区域、主体区域和标题区域。
[0032]进一步地，通过如下方式确定页面图片中相邻两行对应的多个像素点的颜色值是否发生突变，包括:当页面图片中相邻两行对应的多个像素点的颜色值不同时，获取颜色值不同的像素点的数量；根据颜色值不同的像素点的数量确定出所述页面图片中相邻两行对应的多个像素点的颜色值是否发生突变。
[0033]作为一个具体的示例，划分页面图片的多个目标区域(即:划分原APP区域):获取图片各像素点的色值，从最上向下一整行色值突变位置，且该位置距离顶部边距大于10像素处，切分为标题区域；从最下向上一整行夜色突变位置，且该位置距离底部边距大于10像素，切分为导航区域；其余中间区域为主体区域。
[0034]整行色值突变确定方式:取页面横向像素点数为N ;本行各个像素点色值为Cn ;下一行各个像素点的色值为Cn+Ι ;下三行为Cn+3。考虑到过度区域可能为多行像素的情况，通过比较Cn像素点的色值与Cn+Ι各像素点差值的变化个数Nx ;同理，比较Cn与Cn+2，Cn+3 ;得出 Nx+l，Nx+2 ;若90% N〈Nx〈 = N 或 90% N〈Nx+l〈 = N 或 90% N〈Nx+2〈 = N，若标题区域，且n>10，则判定此行n为标题区域突变位置行；若底部区域，且η〈Υ-10，(Υ为纵向像素点数量)，则判定此行η为底部区域突变位置行。
[0035]S103:分别根据多个目标区域中对应于每个目标区域的多个像素点的颜色值确定每个目标区域的色调风格。具体包括:计算每个目标区域中颜色相同的像素点的数量；根据颜色相同的像素点的数量确定目标区域的色调风格。
[0036]作为一个具体的示例，如集成html5标题区域色调风格:获取原APP标题区域所有像素点的色值Cn ;取&1中相同数量最多的色值Cm为集成html5标题区域的主色调；取相同数量第二、第三多的色值分别为Cmt，Cms ;若Cmt与Cms的差值小于50，且Cmt与Cms个数之和大于85% Cn ;或者Cmt>85% Cn, Cms<95% Cn ;则判定Cmt为标题区域辅色调。否则，不存在辅色调；标题栏的辅色为自动配置颜色。
[0037]集成html5导航区域色调风格:获取原APP导航区域所有像素点的色值Cn ;取Cn中相同数量最多的色值Cm为集成html5导航区域的主色调；取相同数量第二、第三多的色值分别为Cmt，Cms ;若Cmt与Cms的差值小于50，且Cmt与Cms个数之和大于85% Cn ;或者Cmt>85% Cn, Cms<95% Cn ;则判定Cmt为标题区域辅色调。否则，不存在辅色调；导航区域的辅色为自动配置颜色。
[0038]集成html5主体区域色调风格:获取原APP主体区域所有像素点的色值Cn ;取Cn中相同数量最多