背景图片生成及搜索结果展示方法、装置、设备和介质
技术领域
本公开涉及图像处理技术领域,具体而言,涉及一种背景图片生成及搜索结果展示方法、装置、设备和介质。
背景技术
目前,很多社交和资讯类APP(应用程序)中,都采用图文展示页面为用户提供信息。图文展示页面一般会搭配图片来展现,丰富页面内容,组合样式更多样化。在一些图文展示页面,以概要文字加图片介绍为主,通常用大图搭配摘要文字,吸引用户点击进入页面查看,其中,信息流中搭配显示的图片可以称为头图图像。
但是,目前的图文展示页面中图片和页面显示背景分离,造成视觉效果单调,使得用户对展示内容很难有沉浸感,影响了页面显示效果。
发明内容
本公开实施例至少提供一种背景图片生成及搜索结果展示方法、装置、设备和介质。
第一方面,本公开实施例提供了一种背景图片生成方法,包括:
从目标图片中提取主颜色;
根据所述主颜色,从预先生成的模板图片中查找与所述目标图片匹配的目标模板图片;
根据所述目标模板图片和所述目标图片,生成内容展示背景图片。
在一种可能的实施方式中,从目标图片中提取主颜色,包括:
利用聚类算法从所述目标图片中提取N种候选主颜色,其中N为大于或等于1的整数;
统计所述候选主颜色在所述目标图片中的像素占有率;
根据所述候选主颜色在所述目标图片中的像素占有率,确定所述目标图片的主颜色。
在一种可能的实施方式中,根据所述候选主颜色在所述目标图片中的像素占有率,确定所述目标图片的主颜色,包括:
将所述候选主颜色按照像素占有率降序排列;
如果排序第一的第一候选主颜色的像素占有率大于第一预设阈值,则确定第一候选主颜色为所述目标图片的主颜色;
如果第一候选主颜色的像素占有率不大于第一预设阈值且排序第二的第二候选主颜色的像素占有率大于第二预设阈值,则确定第一候选主颜色和第二候选主颜色与其对应的像素占有率的加权结果为所述目标图片的主颜色;
如果第一候选主颜色像素占有率不大于第一预设阈值且第二候选主颜色像素占有率不大于第二预设阈值,则确定N种主颜色与其对应的像素占有率加权结果为所述目标图片的主颜色。
在一种可能的实施方式中,根据所述颜色,从预先生成的模板图片中查找与所述目标图片匹配的目标模板图片,包括:
遍历预先生成的模板图片,根据所述目标图片的主颜色和模板图片的主颜色,确定目标图片与模板图片的曼哈顿距离;
确定曼哈顿距离最短的模板图片作为与所述目标图片匹配的目标模板图片。
在一种可能的实施方式中,采用以下任一种方式表示所述主颜色:红绿蓝RGB、色调饱和度明度HSV和色调饱和度亮度HSL;以及
在采用RGB表示所述主颜色的情况下,按照以下方法确定目标图片与模板图片的曼哈顿距离:
将目标图片的主颜色和模板图片的主颜色从RGB空间转换为HSV空间;
根据模板图片的主颜色和所述目标图片的主颜色在HSV空间的颜色标识,确定目标图片与模板图片的曼哈顿距离。
在一种可能的实施方式中,根据所述目标模板图片和所述目标图片,生成内容展示背景图片,包括:
对所述目标图片进行模糊处理得到模糊后的目标图片;
将模糊后的目标图片与所述目标模板图片按照预设比例线性叠加生成内容展示背景图片。
在一种可能的实施方式中,对所述目标图片进行模糊处理得到模糊后的目标图片,包括:
根据预设大小的滤波核,对邻域内的像素进行模糊处理得到模糊后的目标图片。
第二方面,本公开实施利还提供了一种搜索结果展示方法,包括:
基于获取的搜索关键词发起搜索请求;
获取与所述搜索关键词匹配的至少一个目标资源,所述目标资源中包含目标图片;
在搜索结果页面展示根据所述至少一个目标资源生成的搜索结果卡片;其中,所述搜索结果卡片的内容展示背景图片是基于所述目标图片生成的。
在一种可能的实施方式中,所述内容展示背景图片颜色为根据从所述目标图片中提取的主颜色生成的流式渐变颜色,所述内容展示背景图片颜色按照预定方向在所述搜索结果卡片边缘处呈现透明状。
第三方面,本公开实施例还提供一种背景图片生成装置,包括:
提取模块,用于从目标图片中提取主颜色;
匹配模块,用于根据所述主颜色,从预先生成的模板图片中查找与所述目标图片匹配的目标模板图片;
生成模块,用于根据所述目标模板图片和所述目标图片,生成内容展示背景图片。
在一种可能的实施方式中,所述提取模块,具体用于利用聚类算法从所述目标图片中提取N种候选主颜色,其中N为大于或等于1的整数;统计所述候选主颜色在所述目标图片中的像素占有率;根据所述候选主颜色在所述目标图片中的像素占有率确定所述目标图片的主颜色。
在一种可能的实施方式中,所述提取模块,具体用于将所述候选主颜色按照像素占有率降序排列;如果排序第一的第一候选主颜色的像素占有率大于第一预设阈值,则确定第一候选主颜色为所述目标图片的主颜色;如果第一候选主颜色的像素占有率不大于第一预设阈值且排序第二的第二候选主颜色的像素占有率大于第二预设阈值,则确定第一候选主颜色和第二候选主颜色与其对应的像素占有率的加权结果为所述目标图片的主颜色;如果第一候选主颜色的像素占有率不大于第一预设阈值且第二候选主颜色的像素占有率不大于第二预设阈值,则确定N种主颜色与其对应的像素占有率加权结果为所述目标图片的主颜色。
在一种可能的实施方式中,所述主颜色包括以下任一种:红绿蓝RGB值、色调饱和度明度HSV值和色调饱和度亮度HSL值。
在一种可能的实施方式中,所述匹配模块,具体用于遍历预先生成的模板图片,根据所述目标图片的主颜色和模板图片的主颜色,确定目标图片与模板图片的曼哈顿距离;确定曼哈顿距离最短的模板图片作为与所述目标图片匹配的目标模板图片。
在一种可能实施的方式中,所述生成模块,具体用于对所述目标图片进行模糊处理得到模糊后的目标图片;将模糊后的目标图片与所述目标模板图片按照预设比例线性叠加生成内容展示背景图片。
在一种可能的实施方式中,所述生成模块,具体用于根据预设大小的滤波核,对邻域内的像素进行模糊处理得到模糊后的目标图片。
第四方面,本公开实施例还提供一种搜索结果展示装置,包括:
发送模块,用于基于获取的搜索关键词发起搜索请求;
获取模块,用于获取与所述搜索关键词匹配的至少一个目标资源,所述目标资源中包含目标图片;
显示模块,用于在搜索结果页面展示根据所述至少一个目标资源生成的搜索结果卡片;其中,所述搜索结果卡片的内容展示背景图片是基于所述目标图片生成的。
在一种可能的实施方式中,所述内容展示背景图片颜色为根据从所述目标图片中提取的主颜色生成的流式渐变颜色,所述内容展示背景图片颜色按照预定方向在所述搜索结果卡片边缘处呈现透明状。
第五方面,本公开实施例还提供一种电子设备,包括:处理器、存储器和总线,所述存储器存储有所述处理器可执行的机器可读指令,当计算机设备运行时,所述处理器与所述存储器之间通过总线通信,所述机器可读指令被所述处理器执行时执行上述第一方面或第二方面中任一种可能的实施方式中的步骤。
第六方面,本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述第一方面或第二方面中任一种可能的实施方式中的步骤。
关于上述背景图片生成及搜索结果展示装置、设备和介质的效果描述参见上述背景图片生成及搜索结果展示方法的说明,这里不再赘述。
本公开实施例提供的背景图片生成及搜索结果展示方法、装置、设备和介质,从目标图片中提取主颜色,然后根据提取的主颜色,从预先生成的模板图片中查找与目标图片匹配的目标模板图片,最后根据目标模板图片和目标图片,生成内容展示背景图片,上述过程中,由于内容展示背景图片为根据目标图片的主颜色生成,从而使得页面显示背景与目标图片视觉显示效果融合,增加了页面显示的视觉沉浸感,相比于现有技术中页面背景色彩单一,视觉效果单调等问题,能提升页面设计品质感和显示效果。
为使本公开的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,此处的附图被并入说明书中并构成本说明书中的一部分,这些附图示出了符合本公开的实施例,并与说明书一起用于说明本公开的技术方案。应当理解,以下附图仅示出了本公开的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种背景图片生成方法的流程图;
图2示出了本公开实施例提取目标图片主颜色的具体方法的流程图;
图3示出了本公开实施例所提供的一种搜索结果展示方法的流程图;
图4a示出了本公开实施例客户端显示的搜索页面示意图;
图4b示出了本公开实例背景图片生成方法显示效果示意图;
图5示出了本公开实施例所提供的一种背景图片生成装置的示意图;
图6示出了本公开实施例所提供的一种搜索结果展示装置的示意图;
图7示出了本公开实施例所提供的电子设备结构示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚,下面将结合本公开实施例中附图,对本公开实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本公开一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此,以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围,而是仅仅表示本公开的选定实施例。基于本公开的实施例,本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本公开保护的范围。
经研究发现,目前的图文展示页面中图片和页面显示背景分离,由于现在的页面显示背景色彩单一,造成视觉效果单调,使得用户对展示内容很难有沉浸感,而且,当图文展示页面中所展示的目标图片的颜色和背景颜色不搭配的时候还会有显脏的色彩,影响了页面显示效果,降低了用户体验。
基于上述研究,本公开提供了一种背景图片生成方法,能使页面色彩与页面中的目标图片进行视觉融合,同时产生的模糊质感可以提升页面设计品质感,适配不同图片处理出来的效果都是轻量干净并且符合头图色彩范围的背景效果图。
针对以上方案所存在的缺陷,均是发明人在经过实践并仔细研究后得出的结果,因此,上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案,都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
为便于对本实施例进行理解,首先对本公开实施例所公开的一种背景图片生成方法进行详细介绍,本公开实施例所提供的背景图片生成方法的执行主体一般为具有一定计算能力的电子设备,该电子设备例如包括:终端设备或服务器或其它处理设备,终端设备可以为用户设备(User Equipment,UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字处理(Personal Digital Assistant,PDA)、手持设备、计算设备、车载设备、可穿戴设备等。在一些可能的实现方式中,该背景图片生成方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
下面以执行主体为电子设备为例,对本公开实施例提供的背景图片生成方法加以说明。
本公开实施例中,可以通过从目标图片中提取主颜色,根据提取的主颜色从模板库中匹配相应的模板图片来生成内容展示背景图片。根据本公开实施例,可以按照图1所示的流程生成内容展示背景图片:
S101:从目标图片中提取主颜色。
具体实施时,步骤S101中可以按照图2所示的流程从目标图片中提取主颜色,包括以下步骤:
S201:从目标图片中提取N种候选主颜色。
针对目标图片,利用聚类算法从该目标图片中提取N种颜色作为候选主颜色,其中,N为大于等于1的整数。需要说明的是,N的取值可以根据实际需要进行设定,本发明实施例对此不进行限定,在一个实施例中,例如,N可以设定为3。
在一个实施例中,可以采用K-means聚类算法从目标图片中提取N种颜色作为候选主颜色。其中:K-means聚类算法原理如下:
(1)初始时,可以从目标图片随机选择N个颜色作为初始中心。
本例中,可以设定N=3,即将目标图片中包含的所有颜色划分为3类。
(2)在第k次迭代过程中,对于任意一个目标图片中所包含的颜色,分别计算其到N个中心的距离,将该颜色归到距离最短的中心所在的类。
(3)针对得到的每一类,更新该类的中心值,例如,可以通过计算该类的均值,以均值作为该类的中心值。
(4)对于所有的N个聚类中心,如果利用(2)(3)的迭代法更新后,中心值趋于稳定,则迭代结束,否则继续迭代,直至中心值趋于稳定。
其中,中心值趋于稳定,可以定义为上一次迭代得到的中心值与本次迭代得到的中心值之间的差值在预设范围之内;或者迭代次数达到预设的阈值。
将中心值达到稳定后的N个聚类中心所对应的颜色作为从目标图片中提取出的主颜色。
S202:统计提取的候选主颜色在目标图片中的像素占有率。
本步骤中,针对步骤S101中提取的每一种候选主颜色,统计目标图片中包含的该候选主颜色的像素数量,将该候选主颜色的像素数量与目标图片包含的全部像素数量的比值作为该候选主颜色在目标图片中的像素占有率。例如,对于某候选主颜色来说,在目标图片中共包含229个该候选主颜色的像素,以目标图片包含1000个像素为例,则该候选主颜色在目标图片中的像素占有率为229/1000=22.9%。
具体实施时,可以根据各候选主颜色在目标图片中的像素占有率来确定目标图片的主颜色。例如,在一个实施例中,根据各候选主颜色在目标图片中的像素占有率,可以按照步骤S203-步骤S208的流程确定目标图片的主颜色。
S203:将候选主颜色按照像素占有率降序排列。
本步骤中,可以根据步骤S202中确定出的各候选主颜色的像素占有率,按照像素占有率降序排列。以提取的候选主颜色为A颜色,B颜色和C颜色,其中A颜色的像素占有率为22.9%,B颜色的像素占有率为51%,C颜色的像素占有率为32.5%为例,则按照以下顺序排列各候选主颜色:{B颜色,C颜色,A颜色}。
S204:判断排序第一的第一候选主颜色像素占有率是否大于第一预设阈值,如果是,执行步骤S205,如果否,执行步骤S206。
该步骤进行判断,当排序第一的第一候选主颜色在目标图片中的像素占有率大于第一预设阈值,则执行步骤S205,反之则执行步骤S206。上例中,即判断B颜色的像素占有率是否大于第一预设阈值。
S205:确定第一候选主颜色为目标图片的主颜色,流程结束。
当步骤S204的条件满足时,也即排序第一的第一候选主颜色在目标图片中的像素占有率大于第一预设阈值时,将第一主候选主颜色作为目标图片主颜色。
具体实施时,可以根据实际需要进行设定第一预设阈值,或者根据经验来确定第一预设阈值,本发明实施例对此不进行限定。例如,第一预设阈值可以设定为50%,即在第一候选主颜色的像素占有率大于50%的情况下,确定第一候选主颜色为目标图片的主颜色。上例中,即判断B颜色的像素占有率是否大于50%,由于B颜色的像素占有率大于50%,则执行步骤S205,即确定B颜色为目标图片的主颜色。
S206:判断排序第二的第二候选主颜色的像素占有率是否大于第二预设阈值,如果是,执行步骤S207,如果否,执行步骤S208。
当步骤S204的条件不满足时,也即排序第一的第一候选主颜色在目标图片中的像素占有率不大于第一预设阈值时,则继续进行判断,判断排序第二的第二候选主颜色在目标图片中的像素占有率是否大于第二预设阈值,当判断结果为是的时候,执行步骤S207,当判断结果为否的时候,执行步骤S208。
需要说明的是,与第一预设阈值设定方式类似,第二预设阈值也可以根据实际需要或者经验值进行设定,本发明实施例对此不进行限定。在一个实施例中,例如,第二预设阈值可以设定为40%。即在第一候选主颜色的像素占有率不大于50%,第二候选主颜色的像素占有率大于40%的情况下,执行步骤S207。
以提取的候选主颜色为A颜色,B颜色和C颜色,其中A颜色的像素占有率为10.9%,B颜色的像素占有率为45%,C颜色的像素占有率为41%为例,排序第一的B颜色像素占有率不超过第一预设阈值,且C颜色像素占有率超过第二预设阈值,这种情况下,执行步骤S207。
S207:确定第一候选主颜色和第二候选主颜色与其对应像素占有率的加权结果为目标图片的主颜色,流程结束。
当S206步骤的判断条件满足时,也即第一候选主颜色在目标图片中的像素占有率不大于第一预设阈值且排序第二的第二候选主颜色在目标图片中的像素占有率大于第二预设阈值,则将第一候选主颜色和第二候选主颜色与对应像素占有率的加权结果作为目标图片的主颜色。
具体实施时,可以按照以下公式确定目标图片的主颜色:α*a+β*b,其中,a和b分别为第一候选主颜色和第二候选主颜色,α和β分别为第一候选主颜色和第二候选主颜色在目标图片中的像素占有率。
上例中,可以按照以下方法确定目标图片的主颜色:45%*B颜色+41%*C颜色。
S208:确定N种主颜色与其对应像素占有率加权结果为目标图片的主颜色。
当步骤S206的判断条件不满足时,也即第一候选主颜色像素占有率不大于第一预设阈值且排序第二的第二候选主颜色像素占有率也不大于第二预设阈值,则确定N种主颜色与其对应像素占有率的加权结果为目标图片的主颜色。
以提取的候选主颜色为A颜色,B颜色和C颜色,其中A颜色的像素占有率为10.9%,B颜色的像素占有率为38%,C颜色的像素占有率为32%为例,排序第一的B颜色像素占有率不超过第一预设阈值,且C颜色像素占有率不超过第二预设阈值,这种情况下,执行步骤S208。
为了便于理解,以N=3为例,具体实施时,当N=3时,可以按照以下公式确定目标图片的主颜色:α*a+β*b+γ*c,其中,a、b和c分别为第一候选主颜色、第二候选主颜色和排序第三的候选主颜色,α、β和γ分别为第一候选主颜色、第二候选主颜色和第三候选主颜色在目标图片中的像素占有率。在本实施例中,对目标图片采用三色渐变方式进行流式渐变色彩处理。
本例中,可以按照以下方法确定目标图片的主颜色:38%*B颜色+32%*C颜色+10.9%*A颜色。
通过上述流程,根据从目标图片中提取的N中候选主颜色在目标图片中的像素占有率来确定目标图片的主颜色。
S102:根据提取的主颜色,从预先生成的模板图片中查找与目标图片匹配的目标模板图片。
具体实施时,可以采用sketch软件生成若干个模板图片。对于生成的模板图片采用图2所示的方法从模板图片中提取主颜色。基于从模板图片中提取的主颜色,本公开实施例中,还可以对模板图片进行流式渐变处理。其中,渐变是在色彩上的一个相对缓慢的过度,视觉会随着这个渐变的过度而产生一种流动感,这种流动感来自于在色彩上发生的种种变化。合理的使用渐变色,可以让图片有变化感、纵深感和整体感,既不至于复杂到影响观看和阅读,也不至于单调空洞。因此,使用渐变色可以减少图片色彩的数量,即使使用同一种渐变色也可以识别出元素与背景,并让图片画面更加和谐统一。
其中,当第一候选主颜色在模板图片中的像素占有率大于第一预设阈值时,对模板图片采用单色渐变方式进行流式渐变色彩处理。以从模板中提取的候选主颜色包括A颜色,B颜色和C颜色为例,按照像素占有率降序排序结果如下{B颜色,C颜色,A颜色}。
如果B颜色的像素占有率超过第一预设阈值,确定模板图片的主颜色为B颜色,并基于B颜色进行流式渐变色彩处理。如果第一候选主颜色在模板图片中的像素占有率不大于第一预设阈值且第二候选主颜色在模板图片中的像素占有率大于第二预设阈值,对模板图片采用双色渐变方式进行流式渐变色彩处理,即基于B颜色和C颜色两种颜色的加权结果进行流式渐变色彩处理。当第一候选主颜色在模板图片中的像素占有率不大于第一预设阈值且第二候选主颜色在模板图片中的像素占有率不大于第二预设阈值时,对模板图片采用N种颜色渐变方式进行流式渐变色彩处理,本例中,即基于B颜色、C颜色和A颜色三种颜色的加权结果进行流式渐变色彩处理。
针对生成的每一模板图片分别实施上述流程,可以确定每一模板图片的主颜色,在确定每一模板图片的主颜色之后,可以建立模板图片标识与主颜色之间的对应关系供后续匹配步骤使用。
本步骤中,遍历预先生成的模板图片,根据目标图片的主颜色和模板图片的主颜色,在模板库中查找主颜色与目标图片的主颜色匹配的模板图片。在一种实施方式中,可以采用曼哈顿距离或者L1范数作为匹配依据,即确定目标图片的主颜色与模板图片的主颜色之间的曼哈顿距离,确定曼哈顿距离最短的模板图片作为与目标图片匹配的目标模板图片。
一般来说,无论是灰度图像还是彩色图像可以采用二维数值矩阵来表示。其中,彩色图像可以用RGB(红绿蓝)三元组的二维矩阵来表示。通常,三元组的每个数值在0-255之间,0表示相应的基色在该像素中没有,而255则代表相应的基色在该像素中取得最大值,这种情况下每个像素可用三个字节来表示。
RGB是最常见的颜色空间,由三个通道表示一幅图像,分别为红色(R),绿色(G)和蓝色(B),这三种颜色的不同组合可以形成几乎所有的其他颜色。RGB颜色空间利用三个颜色分量的线性组合来表示颜色,任何颜色都与这三个分量有关,而且这三个分量是高度相关的,所以连续变换颜色时并不直观,而且,RGB颜色空间的三个分量都与亮度密切相关,即只要亮度改变,三个分量都会随之相应地改变,所以RGB颜色空间适合于显示系统,却并不适合于图像处理。在图像处理中使用较多的是HSV颜色空间,HSV表达彩色图像的方式由三个部分组成:Hue(色调、色相);Saturation(饱和度、色彩纯净度);Value(明度)。HSL和HSV比较类似,HSL也有三个分量,hue(色相)、saturation(饱和度)、lightness(亮度)。三种不同的颜色模型可以任意转换。
基于上述描述,具体实施时,主颜色可以采用RGB(红绿蓝)值、HSV(色调饱和度明度)值和HSL(色调饱和度亮度)中的任一种。当采用HSV值或者HSL值表示主颜色时,可以将目标图片的主颜色从RGB空间转换为HSV空间或者HSL空间,得到相应的HSV值或者HSL值。
具体实施时,如果主颜色采用RGB表示,则以目标图片的RGB值与模板图片的RGB值之间的差值绝对值作为两者之间的曼哈顿距离或者L1范数,以目标图片主颜色对应的RDB值为212,模板图片主颜色对应的RGB值为124为例,则可以按照以下方式确定两者之间的曼哈顿距离:|212-124|=88;如果主颜色采用HSV值或者HSL值表示,则以目标图片的HSV值或者HSL值中的H值与模板图片的HSV值或者HSL值中的H值之间的差值绝对值作为两者之间的曼哈顿距离或者L1范数。
S103:根据目标模板图片和目标图片,生成内容展示背景图片。
在一种实施方式中,可以首先对目标图片进行模糊处理得到模糊后的目标图片,将模糊后的目标图片与目标模板图片按照预设比例线性叠加生成内容展示背景图片。例如,具体实施时,根据目标模板图片和目标图片,可以按照以下方法生成内容展示背景图片:δ*A+λ*B,其中:A表示模糊后的目标图片,B表示步骤S202中匹配出的目标模板图片,δ和λ分别表示目标图片和目标模板图片对应的叠加比例。需要说明的是,δ和λ的具体数值可以根据实际需要进行设定,本发明实施例中不进行限定,例如,在一个实施例中,可以设定为δ=0.8,λ=0.2。
具体实施中,在对目标图片进行模糊处理时,可以根据预设大小的滤波核,对邻域内的像素使用线性运算平滑加权和进行模糊处理得到模糊后的目标图片。其中,滤波核的大小也可以根据实际需要进行设定,本发明实施例对此也不进行限定,例如,可以采用大小为301个像素的滤波核。
本领域技术人员可以理解,在具体实施方式的上述方法中,各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定,各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
本公开实例提供的背景图片生成方法,能使背景色彩与页面中的目标图片进行视觉融合,提升页面设计品质感和显示效果,适配不同图片处理出来的效果都是这种轻量干净并且符合头图色彩范围的背景效果图。
根据本公开实施例提供的背景图片生成方法生成内容展示背景图片之后,可以将其叠加到现有的页面背景上进行展示。需要说明的是,本公开实施例提供的背景图片生成方法可以应用于采用信息流方式展示信息的页面中,特别是在卡片式设计的信息流中,响应于用户发起的搜索请求,在搜索结果页面以卡片聚合方式展示相关搜索结果等,相应地,本公开实施例提供了一种搜索结果展示方法,参照图3所示,为本公开实施例提供的一种搜索结果展示方法的流程图,包括以下步骤:
S301:基于获取的搜索关键词发起搜索请求。
具体实施时,用户根据自身需求通过客户端应用程序提交搜索请求,在提交的搜索请求中携带有搜索关键词。需要说明的是,用户可以通过文字、语音或者图片等任一种方式提交搜索请求,本公开实施例对此不仅行限定。如图4a所示,其为客户端显示的搜索页面示意图,用户在搜索页面中显示的搜索框输入搜索关键词并提交,客户端基于用户提交的搜索关键词向服务器发起搜索请求,以用户输入的搜索关键词为“大鱼海棠”为例。
S302:获取与搜索关键词匹配的至少一个目标资源,目标资源中包括目标图片。
具体实施时,服务器在接收到客户端发送的搜索请求中,根据其中携带的搜索关键词“大鱼海棠”查找匹配的目标资源,其中,服务器匹配到的目标资源可以包括多种类型,例如,可以是与“大鱼海棠”相关的视频资源,图片资源,音乐资源和资讯资源等等,匹配到的目标资源中包括目标图片。
S303:在搜索结果页面展示根据至少一个目标资源生成的搜索结果卡片。
其中,搜索结果卡片的内容展示背景图片是基于目标图片生成的。
具体实施时,针对步骤S302中获取的不同类型的目标资源,可以生成不同的搜索结果卡片。
内容展示背景图片颜色为根据从目标图片中提取的主颜色生成的流式渐变颜色,内容展示背景图片颜色按照预定方向在搜索结果卡片边缘处呈现透明状。
例如,在一个实施例中,服务器根据查找到的、不同类型的目标资源生成若干个搜索结果卡片,具体实施时,针对每一搜索结果可以生成相应的搜索结果卡片,或者可以将多个搜索结果聚合生成一个搜索结果卡片,本公开实施例对此不进行限定。在搜索结果卡片包含有目标图片的情况下,服务器还可以根据目标图片采用本公开实施例提供的背景图片生成方法生成该搜索结果卡片的内容展示背景图片,将包含了内容展示背景图片的搜索结果卡片发送给客户端,由客户端向用户在搜索结果页面进行展示。如图4b所示,其为搜索结果页面一种可能的示意图。
在另一实施例中,服务器在根据搜索关键词查找到匹配的至少一个目标资源之后,可以将查找到的至少一个目标资源发送给客户端,由客户端生成若干个搜索结果卡片,具体实施时,针对每一搜索结果可以生成相应的搜索结果卡片,或者可以将多个搜索结果聚合生成一个搜索结果卡片,本公开实施例对此不进行限定。在搜索结果卡片包含有目标图片的情况下,客户端根据目标图片采用本公开实施例提供的背景图片生成方法生成该搜索结果卡片的内容展示背景图片并在搜索结果页面并展示。
本实施例中基于用户提交的搜索关键词获取匹配的网络资源,根据匹配的目标资源生成若干个搜索结果,对于其中的主搜索结果,根据匹配到的目标资源中包含的目标图片生成其内容展示背景图片,并叠加在主搜索结果的展示背景中展示,这样,能够显著区分主搜索结果和其他搜索结果,不一样的显示色彩使用户能够更容易、醒目的获取需要的关键信息,提高信息获取效率。
基于同一发明构思,本公开实施例中还提供了与背景图片生成方法对应的背景图片生成装置,由于本公开实施例中的装置解决问题的原理与本公开实施例上述背景图片生成方法相似,因此装置的实施可以参见方法的实施,重复之处不再赘述。
参照图5所示,为本公开实施例提供的背景图片生成装置的示意图,所述装置包括:提取模块401、匹配模块402和生成模块403;其中,
提取模块401,用于从目标图片中提取主颜色;
匹配模块402,用于根据所述主颜色,从预先生成的模板图片中查找与所述目标图片匹配的目标模板图片;
生成模块403,用于根据所述目标模板图片和所述目标图片,生成内容展示背景图片。
一种可能的实施方式中,所述提取模块401,具体用于利用聚类算法从所述目标图片中提取N种候选主颜色,其中N为大于或等于1的整数;统计所述候选主颜色在所述目标图片中的像素占有率;根据所述候选主颜色在所述目标图片中的像素占有率确定所述目标图片的主颜色。
一种可能的实施方式中,所述提取模块401,具体用于将所述候选主颜色按照像素占有率降序排列;如果排序第一的第一候选主颜色的像素占有率大于第一预设阈值,则确定第一候选主颜色为所述目标图片的主颜色;如果第一候选主颜色的像素占有率不大于第一预设阈值且排序第二的第二候选主颜色的像素占有率大于第二预设阈值,则确定第一候选主颜色和第二候选主颜色与其对应的像素占有率的加权结果为所述目标图片的主颜色;如果第一候选主颜色的像素占有率不大于第一预设阈值且第二候选主颜色的像素占有率不大于第二预设阈值,则确定N种主颜色与其对应的像素占有率加权结果为所述目标图片的主颜色。
一种可能的实施方式中,所述主颜色包括以下任一种:红绿蓝RGB值、色调饱和度明度HSV值和色调饱和度亮度HSL值。
一种可能的实施方式中,所述匹配模块402,具体用于遍历预先生成的模板图片,根据所述目标图片的主颜色和模板图片的主颜色,确定目标图片与模板图片的曼哈顿距离;确定曼哈顿距离最短的模板图片作为与所述目标图片匹配的目标模板图片。
一种可能实施的方式中,所述生成模块403,具体用于对所述目标图片进行模糊处理得到模糊后的目标图片;将模糊后的目标图片与所述目标模板图片按照预设比例线性叠加生成内容展示背景图片。
在一种可能的实施方式中,所述生成模块403,具体用于根据预设大小的滤波核,对邻域内的像素进行模糊处理得到模糊后的目标图片。
参照图6所示,为本公开实施例提供的一种搜索结果展示装置的示意图,所述装置包括:发送模块501、获取模块502和显示模块503;其中:
发送模块501,用于基于获取的搜索关键词发起搜索请求;
获取模块502,用于获取与所述搜索关键词匹配的至少一个目标资源,所述目标资源中包含目标图片;
显示模块503,用于在搜索结果页面展示根据所述至少一个目标资源生成的搜索结果卡片;其中,所述搜索结果卡片的内容展示背景图片是基于所述目标图片生成的。
在一种可能的实施方式中,所述内容展示背景图片颜色为根据从所述目标图片中提取的主颜色生成的流式渐变颜色,所述内容展示背景图片颜色按照预定方向在所述搜索结果卡片边缘处呈现透明状。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明,这里不再详述。
本公开实施例还提供了一种电子设备,如图7所示,为本公开实施例提供的电子设备结构示意图,包括:
处理器61和存储器62;所述存储器62存储有处理器61可执行的机器可读指令,处理器61用于执行存储器62中存储的机器可读指令,所述机器可读指令被处理器61执行时,处理器61执行下述步骤:步骤S101:从目标图片中提取主颜色;步骤S102:根据提取的主颜色,从预先生成的模板图片中查找与目标图片匹配的目标模板图片;以及步骤S103:根据目标模板图片和目标图片,生成内容展示背景图片。或者所述机器可读指令被处理器61执行时,处理器61执行下述步骤:步骤S301:基于获取的搜索关键词发起搜索请求;步骤S302:获取与搜索关键词匹配的至少一个目标资源,目标资源中包括目标图片;步骤S303:在搜索结果页面展示根据至少一个目标资源生成的搜索结果卡片。
上述存储器62包括内存621和外部存储器622;这里的内存621也称内存储器,用于暂时存放处理器61中的运算数据,以及与硬盘等外部存储器622交换的数据,处理器61通过内存621与外部存储器622进行数据交换。
上述指令的具体执行过程可以参考本公开实施例中所述的背景图片生成方法或搜索结果展示方法的步骤,此处不再赘述。
本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述方法实施例中所述的背景图片生成方法或搜索结果展示方法的步骤。其中,该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例所提供的背景图片生成方法或搜索结果展示方法的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行上述方法实施例中所述的背景图片生成方法或搜索结果展示方法的步骤,具体可参见上述方法实施例,在此不再赘述。
本公开实施例还提供一种计算机程序,该计算机程序被处理器执行时实现前述实施例的任意一种方法。该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中,所述计算机程序产品具体体现为计算机存储介质,在另一个可选实施例中,计算机程序产品具体体现为软件产品,例如软件开发包(Software DevelopmentKit,SDK)等等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统和装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。在本公开所提供的几个实施例中,应该理解到,所揭露的系统、装置和方法,可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,又例如,多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本公开各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解,本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-OnlyMemory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上所述实施例,仅为本公开的具体实施方式,用以说明本公开的技术方案,而非对其限制,本公开的保护范围并不局限于此,尽管参照前述实施例对本公开进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本公开揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围,都应涵盖在本公开的保护范围之内。因此,本公开的保护范围应所述以权利要求的保护范围为准。