CN107102863A - 一种根据轮播图片自动确定轮播区域背景色的方法及系统 - Google Patents

Abstract

本发明涉及一种根据轮播图片自动确定轮播区域背景色的方法及系统。所述方法包括：获取轮播区域中图片区域的高度尺寸和宽度尺寸；按照显示区域的高度尺寸和宽度尺寸，对轮播图片进行截取，截取后的图片作为在图片区域显示的图片；获取每张截取后的图片的像素点的色值；从每张截取后的图片的像素点的色值中选取一个色值，作为与该截取后的图片对应的背景色的色值。本发明实施例可以在前端自动获取图片的背景色，降低了运营成本以及杜绝操作失误。

Description

一种根据轮播图片自动确定轮播区域背景色的方法及系统

技术领域

本发明属于网页设计技术领域，具体涉及一种根据轮播图片自动确定轮播区域背景色的方法及系统。

背景技术

轮播图片(carousel)是在网站首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，网页设计者利用轮播图片来最大化信息密度。轮播图片有多种形状和大小，它一般显示在首页的顶部，并占据不用滚动即可显示的页面上相当可观的面积。同一个轮播位置可以展示多页内容，但每一次只展现一个页面；每页中一般包含图片以及小段文字。通过指示器表明轮播图片的页数。通过轮播图片的方式使得网页上最重要的位置可以自动滚动展示多页内容，方便用户查看。

目前大多数网站首页的顶部都会有轮播图片，而且在宽度方向上会占满整个显示屏幕。为了兼容大尺寸屏幕，则需要一张很大的图片。大尺寸的图片对于网页的响应速度影响很大。于是设计时，可以只切中间一部分的图片显示在屏幕上的中间位置，屏幕上的其他地方使用背景色填充。现有的背景色填充方法是，在上传图片的时候，设置好背景色，然后显示屏幕的接口根据上传的背景色的色值，设置和填充屏幕上的其他地方的背景色。在每次上传图片的时候都需要人工设置图片对应的背景色的色值，因此大大增加了运营人员的维护成本，同时也存在设置错误的风险。

发明内容

为了解决上述的每次上传图片的时候都需要设置图片对应的背景色的色值的问题，本发明提出了一种根据轮播图片自动确定轮播区域背景色的方法及系统。

一种根据轮播图片自动确定轮播区域背景色的方法，轮播区域划分为用于显示轮播图片的图片区域和用于显示背景色的背景色区域；该方法包括以下步骤：

获取轮播区域中图片区域的高度尺寸和宽度尺寸；

按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片进行截取，截取后的图片作为在图片区域显示的图片；

获取每张截取后的图片的像素点的色值；

从每张截取后的图片的像素点的色值中选取一个色值，作为与该截取后的图片对应的背景色的色值。

进一步，侦听显示区域中轮播显示图片切换的事件，在侦听到切换轮播显示图片时，拟显示的图片作为显示在显示区域的图片，与拟显示的图片对应的背景色的色值作为背景色区域的背景色的色值。

进一步，获取每张截取后的图片的像素点的色值的方式为：通过HTML5的canvas获取拟显示的图片对应的背景色的色值；

所述获取的每张截取后的图片的像素点的色值存储在与该截取后的图片对应的数组中。

进一步，对每张截取后的图片的像素点的所有色值进行统计，将出现次数最多的色值作为所述与该截取后的图片对应的背景色的色值。

进一步，所述获取的每张截取后的图片的像素点的色值为每张截取后的图片的边缘像素点的色值。

一种根据轮播图片自动确定轮播区域背景色的系统，该系统包括：尺寸获取模块、截取模块、色值获取模块、选取模块和侦听模块；

尺寸获取模块用于获取轮播区域中图片区域的高度尺寸和宽度尺寸；

截取模块用于按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片进行截取，截取后的图片作为在图片区域显示的图片；

色值获取模块用于获取每张截取后的图片的像素点的色值；

选取模块用于从每张截取后的图片的像素点的色值中选取一个色值，作为与该截取后的图片对应的背景色的色值。

进一步，所述系统还包括侦听模块，侦听模块用于侦听显示区域中轮播显示图片切换的事件，在侦听到切换轮播显示图片时，拟显示的图片作为显示在显示区域的图片，与拟显示的图片对应的背景色的色值作为背景色区域的背景色的色值。

进一步，色值获取模块获取每张截取后的图片的像素点的色值的方式为：通过HTML5的canvas获取拟显示的图片对应的背景色的色值；

色值获取模块将所述获取的每张截取后的图片的像素点的色值存储在与该截取后的图片对应的数组中。

进一步，选取模块对每张截取后的图片的像素点的所有色值进行统计，将出现次数最多的色值作为所述与该截取后的图片对应的背景色的色值。

进一步，所述色值获取模块获取的每张截取后的图片的像素点的色值为每张截取后的图片的边缘像素点的色值。

本发明实施例的有益效果：本发明实施例提出的根据轮播图片自动确定轮播区域背景色的方法可以在前端自动获取图片的背景色，然后填充到容器中去，降低了运营成本以及杜绝操作失误。

附图说明

图1是本发明实施例提出的根据轮播图片自动确定轮播区域背景色的方法的流程图；

图2是本发明实施例提出的根据轮播图片自动确定轮播区域背景色的系统的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。但本领域技术人员知晓，本发明并不局限于附图和以下实施例。

本发明实施例提出的根据轮播图片自动确定轮播区域背景色的方法，如图1所示，其中，轮播区域划分为用于显示轮播图片的图片区域和用于显示背景色的背景色区域。图片区域位于轮播区域的中心位置，图片区域的宽度可以根据需要设置，高度与轮播区域的高度相同；背景色区域位于图片区域左右两侧，图片区域左右两侧的背景色区域的宽度之和加上图片区域的宽度等于轮播区域的宽度。或者，图片区域位于轮播区域的中心位置，图片区域的宽度可以根据需要设置，高度低于轮播区域的高度；背景色区域位于图片区域左右两侧和图片区域上下两侧，图片区域左右两侧的背景色区域的宽度之和加上图片区域的宽度等于轮播区域的宽度；图片区域上下两侧的背景色区域的高度之和加上图片区域的高度等于轮播区域的高度。

该方法包括以下步骤：

获取轮播区域中图片区域的高度尺寸和宽度尺寸；用户可以自行设置图片区域的高度尺寸和宽度尺寸，也可以从预先设置的标准模板库中选取图片区域的高度尺寸和宽度尺寸；

按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片进行截取，截取后的图片作为在图片区域显示的图片；

截取方式可以为：直接按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片沿中心位置进行截取，不对图片进行压缩；

截取方式还可以为：在保证图片不失真且像素最大的前提下，将轮播图片包括的每张图片的像素按照显示区域的高度尺寸和宽度尺寸进行压缩适配，然后按照显示区域的高度尺寸和宽度尺寸对压缩适配后的图片进行截取；

获取每张截取后的图片的像素点的色值，优选地，获取每张截取后的图片的边缘像素点的色值，以减少计算量；优选地，将获取的所有色值存储在该图片对应的数组中；

从每张截取后的图片对应的数组中选取一个色值，作为与该截取后的图片对应的背景色的色值；优选地，对每张截取后的图片对应的数组中存储的所有色值进行统计，将出现次数最多的色值作为与该截取后的图片对应的背景色的色值，即当显示区域显示该截取后的图片时，背景色区域的色值为所述出现次数最多的色值；在数组中标记所述出现次数最多的色值或者重新存储所述出现次数最多的色值；

侦听显示区域中轮播显示图片切换的事件，在侦听到轮播显示图片进行切换的同时，获取拟显示的图片对应的背景色的色值，其中，拟显示图片(截取后的图片)作为显示在显示区域的图片，获取的背景色的色值作为背景色区域的色值，显示在背景色区域。

其中，获取每张图片的边缘像素点的色值的方式为：通过HTML5的canvas(画布)获取拟显示的图片对应的背景色的色值，并将获取的背景色的色值作为背景色区域的色值。

本发明实施例提出的根据轮播图片自动确定轮播区域背景色的系统，如图2所示，其中，轮播区域划分为用于显示轮播图片的图片区域和用于显示背景色的背景色区域。图片区域位于轮播区域的中心位置，图片区域的宽度可以根据需要设置，高度与轮播区域的高度相同；背景色区域位于图片区域左右两侧，图片区域左右两侧的背景色区域的宽度之和加上图片区域的宽度等于轮播区域的宽度。或者，图片区域位于轮播区域的中心位置，图片区域的宽度可以根据需要设置，高度低于轮播区域的高度；背景色区域位于图片区域左右两侧和图片区域上下两侧，图片区域左右两侧的背景色区域的宽度之和加上图片区域的宽度等于轮播区域的宽度；图片区域上下两侧的背景色区域的高度之和加上图片区域的高度等于轮播区域的高度。

该系统包括：尺寸获取模块、截取模块、色值获取模块、选取模块和侦听模块。

尺寸获取模块用于获取轮播区域中图片区域的高度尺寸和宽度尺寸；用户可以自行设置图片区域的高度尺寸和宽度尺寸，也可以从预先设置的标准模板库中选取图片区域的高度尺寸和宽度尺寸；

截取模块用于按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片进行截取，截取后的图片作为在图片区域显示的图片；

截取方式可以为：直接按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片沿中心位置进行截取，不对图片进行压缩；

截取方式还可以为：在保证图片不失真且像素最大的前提下，将轮播图片包括的每张图片的像素按照显示区域的高度尺寸和宽度尺寸进行压缩适配，然后按照显示区域的高度尺寸和宽度尺寸对压缩适配后的图片进行截取；

色值获取模块用于获取每张截取后的图片的像素点的色值，优选地，获取每张截取后的图片的边缘像素点的色值，以减少计算量；优选地，将获取的所有色值存储在该图片对应的数组中；

选取模块用于从每张截取后的图片对应的数组中选取一个色值，作为与该截取后的图片对应的背景色的色值；优选地，选取模块对每张截取后的图片对应的数组中存储的所有色值进行统计，将出现次数最多的色值作为与该截取后的图片对应的背景色的色值，即当显示区域显示该截取后的图片时，背景色区域的色值为所述出现次数最多的色值；在数组中标记所述出现次数最多的色值或者重新存储所述出现次数最多的色值；

侦听模块用于侦听显示区域中轮播显示图片切换的事件，在侦听到轮播显示图片进行切换的同时，获取拟显示图片(截取后的图片)对应的背景色的色值，其中，拟显示图片(截取后的图片)作为显示在显示区域的图片，获取的背景色的色值作为背景色区域的色值，显示在背景色区域。

其中，色值获取模块获取每张图片的边缘像素点的色值的方式为：通过HTML5的canvas(画布)获取拟显示的图片对应的背景色的色值，并将获取的背景色的色值作为背景色区域的色值。

下面对上述根据轮播图片自动确定轮播区域背景色的方法进行举例说明。

设轮播区域为宽度为800像素、高度为100像素的长方形，显示区域为宽度为400像素、高度为100像素的长方形，显示区域左侧的背景色区域为宽度为200像素、高度为100像素的长方形，显示区域右侧的背景色区域为宽度为200像素、高度为100像素的长方形。轮播图片包括A、B、C、D四张图片，每张图片的分辨率为640*480。

该根据轮播图片自动确定轮播区域背景色的方法包括以下步骤：

获取轮播区域中图片区域的宽度为400像素，高度为100像素；

按照显示区域的宽度尺寸和高度尺寸，分别对A、B、C、D四张图片进行中心位置直接截取，截取后的图片分别为A1、B1、C1、D1四张图片，A1、B1、C1、D1四张图片的宽度为400像素、高度为100像素，A1、B1、C1、D1四张图片作为在图片区域显示的图片；

分别获取A1、B1、C1、D1四张图片的边缘像素点的色值，获取的A1图片的所有色值存储在A1图片对应的数组arrayA1中，获取的B1图片的所有色值存储在B1图片对应的数组arrayB1中，获取的C1图片的所有色值存储在C1图片对应的数组arrayC1中，获取的D1图片的所有色值存储在D1图片对应的数组arrayD1中；

对数组arrayA1中存储的所有色值进行统计，将出现次数最多的色值maxA1作为与A1图片对应的背景色的色值colorA1；对数组arrayB1中存储的所有色值进行统计，将出现次数最多的色值maxB1作为与B1图片对应的背景色的色值colorB1；对数组arrayC1中存储的所有色值进行统计，将出现次数最多的色值maxC1作为与C1图片对应的背景色的色值colorC1；对数组arrayD1中存储的所有色值进行统计，将出现次数最多的色值maxD1作为与D1图片对应的背景色的色值colorD1；在数组arrayA1中标记色值maxA1，在数组arrayB1中标记色值maxB1，在数组arrayC1中标记色值maxC1，在数组arrayD1中标记色值maxD1；

侦听显示区域中轮播显示图片切换的事件，在侦听到轮播显示图片进行切换的同时，假设从A1图片切换到C1图片，获取C1图片对应的背景色的色值colorC1，将C1图片显示在显示区域，获取的背景色的色值colorC1作为背景色区域的色值。

下面对上述根据轮播图片自动确定轮播区域背景色的方法进行举例说明。

设轮播区域为宽度为800像素、高度为160像素的长方形，显示区域为宽度为400像素、高度为120像素的长方形，显示区域左侧的背景色区域为宽度为200像素、高度为120像素的长方形，显示区域右侧的背景色区域为宽度为200像素、高度为120像素的长方形，显示区域上侧的背景色区域为宽度为400像素、高度为20像素的长方形，显示区域下侧的背景色区域为宽度为400像素、高度为20像素的长方形。轮播图片包括A、B、C、D四张图片，每张图片的分辨率为640*480。

该根据轮播图片自动确定轮播区域背景色的方法包括以下步骤：

获取轮播区域中图片区域的宽度为400像素，高度为120像素；

在保证图片不失真且像素最大的前提下，按照显示区域的宽度尺寸和高度尺寸，分别对A、B、C、D四张图片进行压缩适配，A、B、C、D四张图片压缩适配成分辨率为400*300，截取后的图片分别为A2、B2、C2、D2四张图片，A2、B2、C2、D2四张图片的宽度为400像素、高度为80像素，A2、B2、C2、D2四张图片作为在图片区域显示的图片；

分别获取A2、B2、C2、D2四张图片的边缘像素点的色值，获取的A2图片的所有色值存储在A2图片对应的数组arrayA2中，获取的B2图片的所有色值存储在B2图片对应的数组arrayB2中，获取的C2图片的所有色值存储在C2图片对应的数组arrayC2中，获取的D2图片的所有色值存储在D2图片对应的数组arrayD2中；

对数组arrayA2中存储的所有色值进行统计，将出现次数最多的色值maxA2作为与A2图片对应的背景色的色值colorA2；对数组arrayB2中存储的所有色值进行统计，将出现次数最多的色值maxB2作为与B2图片对应的背景色的色值colorB2；对数组arrayC2中存储的所有色值进行统计，将出现次数最多的色值maxC2作为与C2图片对应的背景色的色值colorC2；对数组arrayD2中存储的所有色值进行统计，将出现次数最多的色值maxD2作为与D2图片对应的背景色的色值colorD2；在数组arrayA2中标记色值maxA2，在数组arrayB2中标记色值maxB2，在数组arrayC2中标记色值maxC2，在数组arrayD2中标记色值maxD2；

侦听显示区域中轮播显示图片切换的事件，在侦听到轮播显示图片进行切换的同时，假设从A2图片切换到C2图片，获取C2图片对应的背景色的色值colorC2，将C2图片显示在显示区域，获取的背景色的色值colorC2作为背景色区域的色值。

本发明实施例还提出了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。

本发明实施例还提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

本领域技术人员可以理解，在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或它们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上，对本发明的实施方式进行了说明。但是，本发明不限定于上述实施方式。凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种根据轮播图片自动确定轮播区域背景色的方法，其特征在于，轮播区域划分为用于显示轮播图片的图片区域和用于显示背景色的背景色区域；该方法包括以下步骤：

获取轮播区域中图片区域的高度尺寸和宽度尺寸；

按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片进行截取，截取后的图片作为在图片区域显示的图片；

获取每张截取后的图片的像素点的色值；

从每张截取后的图片的像素点的色值中选取一个色值，作为与该截取后的图片对应的背景色的色值。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：侦听显示区域中轮播显示图片切换的事件，在侦听到切换轮播显示图片时，拟显示的图片作为显示在显示区域的图片，与拟显示的图片对应的背景色的色值作为背景色区域的背景色的色值。

3.根据权利要求1所述的方法，其特征在于，获取每张截取后的图片的像素点的色值的方式为：通过HTML5的canvas获取拟显示的图片对应的背景色的色值；

所述获取的每张截取后的图片的像素点的色值存储在与该截取后的图片对应的数组中。

4.根据权利要求1所述的方法，其特征在于，对每张截取后的图片的像素点的所有色值进行统计，将出现次数最多的色值作为所述与该截取后的图片对应的背景色的色值。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述获取的每张截取后的图片的像素点的色值为每张截取后的图片的边缘像素点的色值。

6.一种根据轮播图片自动确定轮播区域背景色的系统，其特征在于，该系统包括：尺寸获取模块、截取模块、色值获取模块、选取模块和侦听模块；

尺寸获取模块用于获取轮播区域中图片区域的高度尺寸和宽度尺寸；

截取模块用于按照显示区域的高度尺寸和宽度尺寸，对轮播图片包括的每张图片进行截取，截取后的图片作为在图片区域显示的图片；

色值获取模块用于获取每张截取后的图片的像素点的色值；

选取模块用于从每张截取后的图片的像素点的色值中选取一个色值，作为与该截取后的图片对应的背景色的色值。

7.根据权利要求6所述的系统，其特征在于，所述系统还包括侦听模块，侦听模块用于侦听显示区域中轮播显示图片切换的事件，在侦听到切换轮播显示图片时，拟显示的图片作为显示在显示区域的图片，与拟显示的图片对应的背景色的色值作为背景色区域的背景色的色值。

8.根据权利要求6所述的系统，其特征在于，色值获取模块获取每张截取后的图片的像素点的色值的方式为：通过HTML5的canvas获取拟显示的图片对应的背景色的色值；

色值获取模块将所述获取的每张截取后的图片的像素点的色值存储在与该截取后的图片对应的数组中。

9.根据权利要求6所述的系统，其特征在于，选取模块对每张截取后的图片的像素点的所有色值进行统计，将出现次数最多的色值作为所述与该截取后的图片对应的背景色的色值。

10.根据权利要求6至9中任一项所述的系统，其特征在于，所述色值获取模块获取的每张截取后的图片的像素点的色值为每张截取后的图片的边缘像素点的色值。