CN111736941B - 图片处理方法及装置 - Google Patents

Abstract

本公开提供了一种图片处理方法及装置，其中，方法包括获取待处理的图片；对图片基于第一色彩模式进行颜色量化，获得图片的第一目标颜色；将第一目标颜色转换为基于第二色彩模式的表示；将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示；从第二目标颜色中获取图片的取色目标；根据取色目标生成图片对应的蒙层；将图片对应的蒙层添加至图片，生成带蒙层的图片。

Description

图片处理方法及装置

技术领域

本公开涉及图像处理技术领域，更具体地，涉及一种图片处理方法及装置。

背景技术

在移动端应用（app）和网页（web）的设计中，为了使图片上的文字可以清晰显示，通常会在背景图片上添加蒙层，但是目前对于图片蒙层颜色的选取，大多会采用固定颜色，但是当图片上的文字为白色，且蒙层颜色选取的也是白色时，可能会对用户的视觉体验造成影响。此外，目前蒙层颜色的选取也无法避免蒙层颜色饱和度过低或亮度过高，给用户带来不适的情况。现有技术的另一个问题是，移动端和网页由于系统平台的不同，可能会导致同样一张图在不同设备上蒙层展示也不一致。

发明内容

有鉴于此，本公开提供了一种图片处理方法、装置、电子设备及计算机可读介质，其能够至少部分地解决或缓解现有技术的上述问题。

按照本公开内容的第一方面，本公开提供了一种图片处理方法，包括：获取待处理的图片；对图片基于第一色彩模式进行颜色量化，获得图片的第一目标颜色；将第一目标颜色转换为基于第二色彩模式的表示；将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示；从第二目标颜色中获取图片的取色目标；根据取色目标生成图片对应的蒙层；将图片对应的蒙层添加至图片，生成带蒙层的图片。

优选地，获得图片的第一目标颜色，包括：将在图片中面积占比超过预设阈值的颜色作为第一目标颜色，第一目标颜色包括主色和辅助色，其中，面积占比最大的颜色作为主色。

优选地，基于第二色彩模式的表示包括饱和度值和亮度值；将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示，包括：依次判断第一目标颜色中每种颜色的饱和度值是否处于第一设定范围，亮度值是否处于第二设定范围；如果该种颜色的饱和度值为零或处于第一设定范围，且该种颜色的亮度值处于第二设定范围，则该种颜色的基于第二色彩模式的表示不变；如果该种颜色的饱和度值为零，且该种颜色的亮度值不处于第二设定范围，则将该种颜色转换为预设颜色的基于第二色彩模式的表示；如果该种颜色的饱和度值不为零且不处于第一设定范围，则将该种颜色的饱和度值修改为第一设定范围的下限值；如果该种颜色的亮度值不处于第二设定范围，则将该种颜色的亮度值修改为第二设定范围的上限值。

优选地，根据取色目标生成图片对应的蒙层，包括：对取色目标进行渐变处理，生成图片对应的蒙层。

优选地，第二目标颜色包括一种或多种颜色；当第二目标颜色包括多种颜色时，从第二目标颜色中获取图片的取色目标，包括：将在图片中面积占比最大的颜色作为图片的第一取色目标，从其他颜色中选择至少一种颜色作为图片的第二取色目标；根据取色目标生成图片对应的蒙层包括：将第一取色目标和第二取色目标进行渐变处理，根据渐变处理结果生成图片对应的蒙层。

进一步优选地，将第一取色目标和第二取色目标进行渐变处理包括：通过线性插值方式进行从第二取色目标到第一取色目标的线性渐变。

优选地，根据取色目标生成图片对应的蒙层，包括：将图片划分为多个区域；根据取色目标对图片的每一个区域生成不同的透明度渐变蒙层；根据不同的透明度渐变蒙层生成图片对应的蒙层。

按照本公开内容的第二方面，本公开提供了一种图片处理装置，包括：图片获取模块，被配置为用于获取待处理的图片；第一目标颜色获取模块，被配置为用于对图片基于第一色彩模式进行颜色量化，获得图片的第一目标颜色；颜色转换模块，被配置为用于将第一目标颜色转换为基于第二色彩模式的表示；目标颜色优化模块，被配置为用于将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示；取色模块，被配置为用于从第二目标颜色中获取图片的取色目标；蒙层生成模块，被配置为用于根据取色目标生成图片对应的蒙层；图片处理模块，被配置为用于将图片对应的蒙层添加至图片，生成带蒙层的图片。

按照本公开内容的第三方面，本公开提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序；其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器执行如本公开内容的第一方面所述的方法。

按照本公开内容的第四方面，本公开提供了一种计算机可读介质，其上存储有可执行指令，可执行指令被处理器执行时使处理器执行如本公开内容的第一方面所述的方法。

经由上述公开内容可知，本公开提供的一种图片处理方法及装置，先基于第一色彩模式选择图片的第一目标颜色，将第一目标颜色转换成基于第二色彩模式的表示，在第二色彩模式下，将第一目标颜色按照预定规则转换成第二目标颜色，再从第二目标颜色中选择取色目标，从而生成图片对应的蒙层，再将蒙层添加至图片，生成带蒙层的图片。这样蒙层颜色是基于图片本身选取的，且会将直接从图片选择的目标颜色按照预定规则进行转换，可以避免蒙层颜色饱和度过低或亮度过高的情况，提高用户视觉体验。

附图说明

为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1示出了示例的在移动端应用显示的具有蒙层的用户界面。

图2示出了本公开实施例提供的一种图片处理方法的流程图。

图3示出了本公开实施例的生成主色和调色板的结果。

图4示出了本公开实施例的颜色优化方式。

图5示出了本公开实施例的图片作为页面头图的场景。

图6示出了本公开实施例的图片作为移动端背景图的场景。

图7示出了本公开实施例的图片作为PC端背景图的场景。

图8示出了本公开实施例的需要主色和辅助色结合的场景。

图9示出了本公开实施例提供的一种图片处理装置的结构图。

具体实施方式

下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

不论是移动端还是电脑端，在应用程序和网页的设计中，为了在图片上展示文字信息，设计师通常会在图片上添加蒙层，如图1所示，这个蒙层的颜色需要和图片的主色调一致，同时还要避免饱和度过低或亮度过高对用户的体验造成影响。在一些情况下，蒙层颜色还需要进行颜色线性渐变处理，避免单一颜色展示效果不佳。

本公开提供了一种图片处理方法及装置，解决了传统图片蒙层取色饱和度过低和亮度过高的问题，提高了取色效率，且使用JavaScript脚本语言进行图片取色，可以解决同一图片在移动端和电脑端显示蒙层不一致的问题，同时也解决了开发人员开发和维护成本大的问题。

在本公开的具体实施例中，本公开提供了一种图片处理方法，如图2所示，包括以下几个步骤。

S1、获取待处理的图片。

待处理图片为需要添加蒙层的图片，可以为移动端的图片，也可以为电脑端的图片，可以为页面头图，也可以为背景图。可以从服务端获取待处理的图片。

S2、对图片基于第一色彩模式进行颜色量化，获得图片的第一目标颜色。

在本公开的具体实施例中，第一色彩模式可以为RGB色彩模式。在服务端加载完成图片后，可以直接获得图片中每个像素的decode buffer数据，decode buffer数据即为图片的RGB数据。通过图片的decode buffer数据，可以根据leptonica的颜色量化（ColorQuantization），获取到图片的第一目标颜色。

获得图片的第一目标颜色，可以包括：将在图片中面积占比超过预设阈值的颜色作为第一目标颜色，第一目标颜色可以包括主色和辅助色，其中，面积占比最大的颜色作为主色。

具体地，第一目标颜色可以包括一种颜色或多种颜色。例如，可以仅将面积占比最大的颜色作为第一目标颜色，即，第一目标颜色仅包括主色，无辅助色。也可以将面积占比超过20%的颜色作为第一目标颜色，当面积占比超过20%的颜色仅有一种颜色时，第一目标颜色仅包括一种颜色，当面积占比超过20%的颜色有多种颜色时，可以将其中面积占比最大的颜色作为主色，其余颜色作为辅助色。

S3、将第一目标颜色转换为基于第二色彩模式的表示。

第二色彩模式可以为HSB/HSV色彩模式。

将第一目标颜色转换为基于第二色彩模式的表示，可以具体为：将第一目标颜色从RGB色彩模式转换为HSB/HSV色彩模式。

S4、将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示。

如果直接使用leptonica的颜色量化的结果，即第一目标颜色作为取色结果，则可能会出现蒙层颜色饱和度过低或亮度过高的情况，如果蒙层颜色饱和度过低，则获取到的颜色会偏白色，偏白色会导致蒙层上的白色文字展示不清楚，如果蒙层颜色的亮度过高，则获取到的颜色会比较刺眼，干扰用户浏览。因此，可以按照预定规则对第一目标颜色进行转换，避免出现蒙层颜色饱和度过低或亮度过高的情况。

具体地，按照预定规则，将第一目标颜色的HSB/HSV数据进行转换，转换后的HSB/HSV数据即为第二目标颜色。

基于第二色彩模式的表示包括饱和度值和亮度值，即在HSB/HSV色彩模式中，包含颜色的饱和度值，即S值，以及颜色的亮度值，即B值。

将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示，可以包括：依次判断第一目标颜色中每种颜色的饱和度值是否处于第一设定范围，亮度值是否处于第二设定范围；如果该种颜色的饱和度值为零或处于第一设定范围，且该种颜色的亮度值处于第二设定范围，则该种颜色的基于第二色彩模式的表示不变；如果该种颜色的饱和度值为零，且该种颜色的亮度值不处于第二设定范围，则将该种颜色转换为预设颜色的基于第二色彩模式的表示；如果该种颜色的饱和度值不为零且不处于第一设定范围，则将该种颜色的饱和度值修改为第一设定范围的下限值；如果该种颜色的亮度值不处于第二设定范围，则将该种颜色的亮度值修改为所述第二设定范围的上限值。

例如，可以设定S值的第一设定范围为区间[30,100]，B值的第二设定范围为区间[0,70]，则将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示，可以具体为：依次判断第一目标颜色中每种颜色的S值是否处于区间[30,100]，B值是否处于区间[0,70]；如果该种颜色的S值处于区间[30,100]，B值处于区间[0,70]，则说明该种颜色饱和度和亮度均适中，可以直接使用该颜色，不需要修改该颜色的S值和B值；如果该种颜色的S值为0，B值处于区间[0,70]，也说明该种颜色饱和度和亮度均适中，可以直接使用该颜色，不需要修改该颜色的S值和B值；如果该种颜色的S值为0，B值处于区间(70,100]，则说明该种颜色的饱和度值过低，亮度也过高，可能会使用户视觉体验受到影响，因此，可以采用预设颜色的HSB值，例如，可以直接将该种颜色的HSB值修改为#B3B3B3的HSB值；如果该种颜色的S值处于区间(0,30)，B值处于区间[0,70]，则说明该种颜色的饱和度过低，可以直接将该种颜色的S值修改为30；如果该种颜色的S值处于区间[30,100]，B值处于区间(70,100]，则说明该种颜色的亮度过高，可以直接将该种颜色的B值修改为70；如果该种颜色的S值处于区间(0,30)，B值处于区间(70,100]，则说明该种颜色的饱和度过低且亮度过高，可以直接将该颜色的S值修改为30，B值修改为70。

通过本公开实施例中的预定规则对第一目标颜色进行转换，可以避免蒙层的颜色饱和度过低和亮度过高的情况，提高用户视觉体验。

其中，第二目标颜色可能包括一种颜色，也可能包括多种颜色。当第一目标颜色为一种颜色时，第二目标颜色可以直接为该颜色按照预定规则转换后的颜色，即第二目标颜色为一种颜色。当第一目标颜色为多种颜色时，第二目标颜色可能为一种颜色，也可能为多种颜色。例如，当第一目标颜色的多种颜色按照预定规则转换后仅生成了一种颜色，则该颜色直接为第二目标颜色，即第二目标颜色为一种颜色；如果第一目标颜色的多种颜色按照预定规则转换后生成了两种或以上的颜色，则该两种或以上的颜色作为第二目标颜色，及第二目标颜色为多种颜色。

S5、从第二目标颜色中获取图片的取色目标。

具体地，从第二目标颜色中获取图片的取色目标可以包括：将第二目标颜色基于第二色彩模式的表示转换为其基于第一色彩模式的表示；根据第二目标颜色基于第一色彩模式的表示，获取图片的取色目标。例如，将第二目标颜色的基于HSB/HSV色彩模式的表示转换为基于RGB色彩模式的表示，再根据基于RGB色彩模式的表示，获取图片的取色目标。

其中，取色目标可以包括一种颜色或多种颜色。当第二目标颜色为一种颜色时，取色目标也为一种颜色。当第二目标颜色为多种颜色时，取色目标可以为一种颜色，也可以为多种颜色，例如，可以仅选择其中在图片中面积占比最大的颜色作为取色目标，也可以选择其中两种及以上的颜色作为取色目标。如果选择其中两种及以上的颜色作为取色目标，可以将在图片中面积占比最大的颜色作为第一取色目标，从其他颜色中选择至少一种颜色作为图片的第二取色目标。

S6、根据取色目标生成图片对应的蒙层。

具体地，当取色目标为一种颜色时，可以直接生成该颜色的蒙层，这样的蒙层色调和图片的主色调一致，同时还避免了蒙层颜色饱和度过低和亮度过高的情况，效果符合用户认知习惯。

为了避免单一颜色展示效果不佳，或仅基于固定色进行线性渐变导致蒙层色调与图片色调不一致，展示效果不佳的问题，在本公开的具体实施例中，还可以基于上述公开内容对蒙层进行渐变处理。具体地，根据取色目标生成图片对应的蒙层，可以包括：对取色目标进行渐变处理，生成图片对应的蒙层。

其中，渐变处理可以为透明度渐变处理。

具体地，根据取色目标生成图片对应的蒙层，包括：将图片划分为多个区域；根据取色目标对图片的每一个区域生成不同的透明度渐变蒙层；根据不同的透明度渐变蒙层生成图片对应的蒙层。

例如，当图片为页面头图时，可以将图片划分为上半区域和下半区域，具体地，上半区域和下半区域分别占图片的1/2，在上半区域，对取色目标进行从上到下、透明度从0%到50%的渐变处理，在下半区域，对取色目标进行从上到下、透明度从50%到100%的渐变处理，从而生成页面头图对应的蒙层。通过这样的线性渐变，即可以显示出图片的原有信息，又能保证图片上文字的正常展示。

当图片为移动端背景图时，也可以将图片划分为上半区域和下半区域，具体地，上半区域和下半区域分别占图片的1/2，在上半区域，对取色目标进行从上到下、透明度从0%到90%的渐变处理，在下半区域，对取色目标进行从上到下、透明度从90%到100%的渐变处理，从而生成移动端背景图对应的蒙层。通过这样的线性渐变，可以弱化图片的主题信息，同时保证了整体沉浸式的主题氛围，增加了页面中用户消费决策的体验。

当图片为PC端背景图时，可以将图片从上到下划分为六个区域，具体地，可以在图片0~1/12的区域进行从上到下、透明度从0%到20%的渐变处理，在图片1/12~2/12的区域进行从上到下、透明度从20%到90%的渐变处理，在图片2/12~6/12的区域进行从上到下、透明度从90%到100%的渐变处理，在图片6/12~8/12的区域进行从上到下、透明度从100%到90%的渐变处理，在图片8/12~10/12的区域进行从上到下、透明度从90%到40%的渐变处理，在图片10/12~12/12的区域进行从上到下、透明度从40%到0%的渐变处理。通过这样的线性渐变，可以使PC端首屏和手机端保持主题的一致性，又能较好地使PC端屏幕滚动后过渡到标准PC页面的风格。

在本公开的具体实施例中，对于背景图较小的情况，由于直接根据一种颜色进行线性渐变，可能会使蒙层颜色变得不平滑，因此可以通过多种颜色进行线性渐变处理，让渐变的过渡变得平滑，同时可以保障与页面整体风格的一致性。

因此，根据取色目标生成图片对应的蒙层，可以包括：将第一取色目标和第二取色目标进行渐变处理，根据渐变处理结果生成图片对应的蒙层。

其中，将第一取色目标和第二取色目标进行渐变处理可以包括：通过线性插值方式进行从第二取色目标到第一取色目标的线性渐变。

例如，可以进行从上到下、从第二取色目标到第一取色目标、透明度从0%到100%的线性渐变，使渐变的过渡变得平滑。

S7、将图片对应的蒙层添加至图片，生成带蒙层的图片。

具体地，将生成的图片对应的蒙层添加至图片，生成带蒙层的图片，再在带蒙层的图片上显示文字信息，这样可以使蒙层与图片较好地融合，使页面氛围保持一致性，提高页面的可读性。

此外，由于移动端和电脑端提取图片蒙层颜色的方式不同，可能会导致同一张图在不同设备上的蒙层展示效果不一致，例如，虽然都基于leptonica的颜色量化规则获得蒙层取色结果，但是由于各个系统获取图片像素的方式不同，导致实际取色结果不一致，而且不同系统可能需要采用不同的方式实现蒙层取色，导致开发人员需要开发多个取色规则，同时还需要维护多个取色规则，使得开发和维护成本高。因此，在本公开的具体实施例中，可以通过JavaScript脚本语言实现图片蒙层颜色的提取，JavaScript作为脚本语言可以在安卓系统和iOS系统上执行，从而提高取色效率，也解决了开发人员开发和维护成本大、结果不一致的情况。

在本公开的具体实施例中，主要包括颜色量化、颜色转换、取色、生成蒙层四个阶段，具体如下。

一、颜色量化。

首先需要在Node端（即服务端）加载图片，加载完成后，可以获取到图片中每个像素的decode buffer数据，获取图片中每个像素的decode buffer数据可以通过如下方式获取：

/*

{ width: 320,

height: 180,

data: <Buffer 5b 40 29 ff 59 3e 29 ff 54 3c 26 ff 55 3a 27 ff 5a 3e2f ff 5c 3c 31 ff 58 35 2d ff 5b 36 2f ff 55 35 32 ff 5a 3a 37 ff 54 36 32 ff4b 32 2c ff 4b 36 ... > }

*/。

其中，图片像素大小为320×180，buffer数据中，每四个数据为一组，代表一个像素点的RGBA数据，分别代表该点像素的R值（Red，红色）、G值（Green，绿色）、B值（Blue，蓝色）以及A值（Alpha，透明度）。

之后根据获取的decode buffer数据生成图片的RGB主色和调色板，具体地，可以根据leptonica的颜色量化获取到图片的主色和调色板，如图3所示，调色板即为辅助色。其中，辅助色和主色可以根据图片中各个颜色的面积占比决定，例如，可以选择面积占比最大的颜色作为主色，面积占比超过20%的颜色作为辅助色。

二、颜色转换。

在获取到主色和调色板后，可以对颜色进行转换。颜色转换包括RGB转换为HSB/HSV以及颜色优化。

其中，RGB转换为HSB/HSV是将获取到的主色和辅助色从RGB色彩空间转换到HSB/HSV色彩空间，其中，H（hues）值表示色相，S（saturation）值表示饱和度，B（brightness）值或V（Value）值表示亮度。具体地，可以通过如下方式进行转换：

。

其中，let是对变量的定义，当数值&&数值时，返回后者。

即，将v定义为（r,g,b）中的最大值，即，v=max(r,g,b)，n定义为v-min(r,g,b)。

h定义如下：如果r为最大值，h=(g-b)/(max(r,g,b)-min(r,g,b))；如果g为最大值，h=2+(b-r)/(max(r,g,b)-min(r,g,b))；如果b为最大值，h=4+(r-g)/(max(r,g,b)-min(r,g,b))。

最后，返回h值为：如果h<0，h=h+360；否则，h=60×h。返回s值为：s=(max(r,g,b)-min(r,g,b))/max(r,g,b)。返回v值为：v=max(r,g,b)。

颜色优化则可以避免取色结果饱和度过低和亮度过高的情况，如果直接使用leptonica的颜色量化结果进行取色，可能会存在饱和度过低或亮度过高的情况，例如，如果原始图片在HSB/HSV色彩模式中的饱和度过低，获取到的颜色会偏白色，偏白色会导致蒙层上的白色文字展示不清楚；如果原始图片在HSB/HSV色彩模式中的亮度过高，获取到的颜色会比较刺眼，干扰用户浏览。

颜色优化的方式可以参见图4。

具体地，图4中，横坐标表示S值，S值的范围为0~100，纵坐标表示B值，B值范围为0~100。虚线区域为颜色优化后的结果区域，非虚线区域为饱和度过低或亮度过高的区域。具体颜色优化方式如下：如果S值位于区间[30,100]，B值位于区间[0,70]，表示该颜色饱和度不低，亮度也不高，则直接使用该颜色；如果S值位于区间[30,100]，B值位于区间(70,100]，表示该颜色饱和度不低，亮度却过高，则将B值修改为70；如果S值为0，B值位于区间[0,70]，则直接使用该颜色；如果S值为0，B值位于区间(70,100]，则统一采用色值#B3B3B3，即RGB值为(179,179,179)；如果S值位于区间(0,30)，B值位于区间[0,70]，表明该颜色饱和度过低，亮度不高，则将S值修改为30；如果S值位于区间(0,30)，B值位于区间(70,100]，表明该颜色饱和度过低，且亮度过高，则将S值修改为30，B值修改为70。

三、取色。

在获得优化完成后的颜色后，可以将颜色从HSB/HSV色彩空间转换到RGB色彩空间，根据颜色的RGB值，重新确定主色和/或辅助色，获取取色结果。具体地，重新确定的主色可以为在优化后的颜色中出现频次最高的颜色，重新确定的辅助色可以为从优化后的颜色中随机选取的颜色。

四、生成蒙层。

在获取取色结果后，可以直接将重新确定的主色作为蒙层的颜色，直接生成蒙层，如图5上部所示。

也可以对取色结果进行线性渐变，如果基于固定色进行线性渐变，则可能会与图片色调不符，使得展示效果不佳。

本公开实施例中对取色结果进行线性渐变，具体如下。

（1）图片作为页面头图的场景。

图5即为图片作为页面头图的场景，不同于图5直接将取色结果作为蒙层颜色，在另一实施例中，可以将蒙层进行线性渐变。

具体地，可以将图片分为上半部分和下半部分：在图片0~1/2的部分，可以对取色结果进行从上到下、透明度从0%~50%的渐变处理；在图片1/2~1的部分，可以对取色结果进行从上到下、透明度从50%~100%的渐变处理。

通过这样的线性渐变，即可以漏出图片原有信息，又能保证图片上信息的正常展示。

（2）图片作为移动端背景图的场景。

图6即为图片作为移动端背景图的场景。

具体地，可以将图片分为上半部分和下半部分：在图片0~1/2的部分，可以对取色结果进行从上到下、透明度从0%~90%的渐变处理；在图片1/2~1的部分，可以对取色结果进行从上到下、透明度从90%~100%的渐变处理。

通过这样的线性渐变，弱化了图片的主题信息，但保证了整体沉浸式的主题氛围，增加了页面中用户消费决策的体验。

（3）图片作为PC端背景图的场景。

图7即为图片作为PC端（即网页（web））背景图的场景。

具体地，可以将图片从上至下分为6个部分：在图片0~1/12的部分，可以对取色结果进行从上到下、透明度从0%~20%的渐变处理；在图片1/12~2/12的部分，可以对取色结果进行从上到下、透明度从20%~90%的渐变处理；在图片2/12~3/6的部分，可以对取色结果进行从上到下、透明度从90%~100%的渐变处理；在图片3/6~4/6的部分，可以对取色结果进行从上到下、透明度从100%~90%的渐变处理；在图片4/6~5/6的部分，可以对取色结果进行从上到下、透明度从90%~40%的渐变处理；在图片5/6~6/6的部分，可以对取色结果进行从上到下、透明度从40%~0%的渐变处理。

通过这样的线性渐变，即可以保证网页背景图在PC端首屏与手机端应用保持主题的一致性，又能比较好地在屏幕滚动后过渡到标准PC页面的风格。

（4）主色与辅助色结合的场景。

图8即为需要主色和辅助色结合使用的场景。

具体地，对于背景图较小的情况，如果直接根据主色进行线性渐变会让蒙层颜色变得不平滑，因此，可以通过从辅助色到主色、透明度从0%~100%的渐变处理，让蒙层颜色变得平滑。具体的渐变过程可以采用线性插值方式，例如，假设选取的是白色到黑色的渐变，白色的RGB值为(255,255,255)，黑色的RGB值为(0,0,0)，对该线性渐变进行线性插值，最终显示结果即为图片头部为(255,255,255)，图片尾部为(0,0,0)，而1/255的部分为(254,254,254)，6/255的部分为(249,249,249)，250/255的部分为(5,5,5)，254/255的部分为(1,1,1)。

通过主色与辅助色结合进行线性渐变，既可以让渐变的过渡变得平滑，又可以保障与页面整体风格的统一。

最后将生成的蒙层添加至原始图片，生成带蒙层的图片。

本公开实施例提供的蒙层处理方法，相较于直接使用leptonica的颜色量化规则，本公开实施例中产生的蒙层效果符合用户的认知习惯，优化了饱和度过低和亮度过高时一些边缘情况的取色结果，更符合用户的使用习惯。而且对于各个系统来说，虽然都是基于leptonica的颜色量化规则进行取色，但是由于各个系统获取图片像素的方式不同，可能会导致实际结果不一致，因此，本公开实施例相较于移动客户端系统取色，使用JavaScript进行开发，JavaScript作为脚本语言可以在安卓系统和iOS系统上执行，降低多端维护成本，且移动端在获取图片取色时通过把图片传输到JavaScript脚本，JavaScript加载图片后开始执行取色流程，获取到图片主色后告知移动端，保障了结果的一致性。而相较于基于固定色进行线性渐变处理作为背景图的方式，本公开实施例可以和图片实现比较好的融合，同时还可以和页面氛围保持一致，提高了页面的可读性，且设计师不需要进行色彩选取，基于图片的取色结果直接进行线性渐变，提高了后期的维护成本。

本公开还提供了一种与上述方法相对应的图像处理装置，如图9所示，包括：图片获取模块1，被配置为用于获取待处理的图片；第一目标颜色获取模块2，被配置为用于对图片基于第一色彩模式进行颜色量化，获得图片的第一目标颜色；颜色转换模块3，被配置为用于将第一目标颜色转换为基于第二色彩模式的表示；目标颜色优化模块4，被配置为用于将第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示；取色模块5，被配置为用于从第二目标颜色中获取图片的取色目标；蒙层生成模块6，被配置为用于根据取色目标生成图片对应的蒙层；图片处理模块7，被配置为用于将图片对应的蒙层添加至图片，生成带蒙层的图片。

本公开还提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序；其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器执行如上所述的图像处理方法。

本公开还提供了一种计算机可读介质，其上存储有可执行指令，该可执行指令被处理器执行时使处理器执行如上所述的图像处理方法。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本公开所述的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk)等。

需要说明的是，本公开内容中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于方法类实施例而言，由于其与产品类实施例相似，所以描述的比较简单，相关之处参见产品实施例的部分说明即可。

还需要说明的是，在本公开内容中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本公开内容。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本公开内容中所定义的一般原理可以在不脱离本公开内容的精神或范围的情况下，在其它实施例中实现。因此，本公开内容将不会被限制于本公开内容所示的这些实施例，而是要符合与本公开内容所公开的原理和新颖特点相一致的最宽的范围。

Claims (9)

1.一种图片处理方法，包括：

获取待处理的图片；

对所述图片基于第一色彩模式进行颜色量化，获得所述图片的第一目标颜色；其中，将在所述图片中面积占比超过预设阈值的颜色作为所述第一目标颜色；

将所述第一目标颜色转换为基于第二色彩模式的表示；

将所述第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示；

从所述第二目标颜色中获取所述图片的取色目标；

根据所述取色目标生成所述图片对应的蒙层；

将所述图片对应的蒙层添加至所述图片，生成带蒙层的图片；

其中，当所述第二目标颜色包括多种颜色时，从所述第二目标颜色中获取所述图片的取色目标，包括：

将在所述图片中面积占比最大的颜色作为所述图片的第一取色目标，从其他颜色中选择至少一种颜色作为所述图片的第二取色目标；

根据所述取色目标生成所述图片对应的蒙层包括：

将所述第一取色目标和所述第二取色目标进行渐变处理，根据所述渐变处理生成所述图片对应的蒙层。

2.如权利要求1所述的方法，其中，获得所述图片的第一目标颜色，包括：

所述第一目标颜色包括主色和辅助色，其中，面积占比最大的颜色作为主色。

3.如权利要求1所述的方法，其中，所述基于第二色彩模式的表示包括饱和度值和亮度值；将所述第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示，包括：

依次判断所述第一目标颜色中每种颜色的饱和度值是否处于第一设定范围，亮度值是否处于第二设定范围；

如果该种颜色的饱和度值为零或处于所述第一设定范围，且该种颜色的亮度值处于所述第二设定范围，则该种颜色的基于第二色彩模式的表示不变；

如果该种颜色的饱和度值为零，且该种颜色的亮度值不处于所述第二设定范围，则将该种颜色转换为预设颜色的基于第二色彩模式的表示；

如果该种颜色的饱和度值不为零且不处于所述第一设定范围，则将该种颜色的饱和度值修改为所述第一设定范围的下限值；如果该种颜色的亮度值不处于所述第二设定范围，则将该种颜色的亮度值修改为所述第二设定范围的上限值。

4.如权利要求1所述的方法，其中，根据所述取色目标生成所述图片对应的蒙层，包括：

对所述取色目标进行渐变处理，生成所述图片对应的蒙层。

5.如权利要求1所述的方法，其中，将所述第一取色目标和所述第二取色目标进行渐变处理包括：

通过线性插值方式进行从所述第二取色目标到所述第一取色目标的线性渐变。

6.如权利要求1所述的方法，其中，根据所述取色目标生成所述图片对应的蒙层，包括：

将所述图片划分为多个区域；

根据所述取色目标对所述图片的每一个区域生成不同的透明度渐变蒙层；

根据所述不同的透明度渐变蒙层生成所述图片对应的蒙层。

7.一种图片处理装置，包括：

图片获取模块，被配置为用于获取待处理的图片；

第一目标颜色获取模块，被配置为用于对所述图片基于第一色彩模式进行颜色量化，获得所述图片的第一目标颜色；其中，将在所述图片中面积占比超过预设阈值的颜色作为所述第一目标颜色；

颜色转换模块，被配置为用于将所述第一目标颜色转换为基于第二色彩模式的表示；

目标颜色优化模块，被配置为用于将所述第一目标颜色的基于第二色彩模式的表示按照预定规则转换为第二目标颜色的基于第二色彩模式的表示；

取色模块，被配置为用于从所述第二目标颜色中获取所述图片的取色目标；

蒙层生成模块，被配置为用于根据所述取色目标生成所述图片对应的蒙层；

图片处理模块，被配置为用于将所述图片对应的蒙层添加至所述图片，生成带蒙层的图片；

其中，当所述第二目标颜色包括多种颜色时，从所述第二目标颜色中获取所述图片的取色目标，包括：

将在所述图片中面积占比最大的颜色作为所述图片的第一取色目标，从其他颜色中选择至少一种颜色作为所述图片的第二取色目标；

根据所述取色目标生成所述图片对应的蒙层包括：

将所述第一取色目标和所述第二取色目标进行渐变处理，根据所述渐变处理生成所述图片对应的蒙层。

8.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如权利要求1至6任一项所述方法。

9.一种计算机可读介质，其上存储有可执行指令，所述可执行指令被处理器执行时使处理器执行如权利要求1至6任一项所述方法。

Images