CN105741327A - 提取图片的主色和醒目色的方法和装置 - Google Patents

Abstract

本申请提出一种提取图片的主色和醒目色的方法和装置，该提取图片的主色和醒目色的方法包括获取当前要处理的图片，并获取所述图片包含的像素点的颜色值；计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色；计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。该方法可以便捷的提取网页中图片的主色与醒目色。

Description

提取图片的主色和醒目色的方法和装置

技术领域

本申请涉及数据处理技术领域，尤其涉及一种提取图片的主色和醒目色的方法和装置。

背景技术

网页中的图片会包括主色和醒目色，主色是指一张图片中，在一定色值范围内占比最大的颜色，醒目色是指一张图片中，与主色形成强烈颜色反差的颜色。为了进行网页着色方案的调整等，需要提取出图片的主色和醒目色。

现有技术中，可以采用浏览器取色插件，在浏览器浏览的当前网页的任意位置进行取色。但是，这种方式是单点取色方案，单点取色并不能提取出主色和醒目色。

发明内容

本申请旨在至少在一定程度上解决相关技术中的技术问题之一。

为此，本申请的一个目的在于提出一种提取图片的主色和醒目色的方法，该方法可以便捷的提取网页中图片的主色与醒目色。

本申请的第二个目的在于提出一种提取图片的主色和醒目色的装置。

本申请的第三个目的在于提出一种移动终端。

为达到上述目的，本申请第一方面实施例提出的提取图片的主色和醒目色的方法，包括：获取当前要处理的图片，并获取所述图片包含的像素点的颜色值；计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色；计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。

本申请第一方面实施例提出的提取图片的主色和醒目色的方法，通过获取当前要处理的图片包含的像素点的颜色值，并根据该颜色值确定图像的主色和醒目色，可以不限于图片的单点颜色检测，从而便捷的提取网页中图片的主色与醒目色。

为达到上述目的，本申请第二方面实施例提出的提取图片的主色和醒目色的装置，包括：获取模块，用于获取当前要处理的图片，并获取所述图片包含的像素点的颜色值；第一计算模块，用于计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色；第二计算模块，用于计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。

本申请第二方面实施例提出的提取图片的主色和醒目色的装置，通过获取当前要处理的图片包含的像素点的颜色值，并根据该颜色值确定图像的主色和醒目色，可以不限于图片的单点颜色检测，从而便捷的提取网页中图片的主色与醒目色。

本申请第三方面实施例提供了一种移动终端，包括本申请第二方面实施例的提取图片的主色和醒目色的装置。

本申请第三方面实施例的移动终端，通过获取当前要处理的图片包含的像素点的颜色值，并根据该颜色值确定图像的主色和醒目色，可以不限于图片的单点颜色检测，从而便捷的提取网页中图片的主色与醒目色。

本申请附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1是本申请一实施例提出的提取图片的主色和醒目色的方法的流程示意图；

图2是本申请另一实施例提出的提取图片的主色和醒目色的方法的流程示意图；

图3是本申请实施例中提取主色和醒目色的插件图标示意图；

图4是本申请实施例中选取当前要处理的图片的过程示意图；

图5是本申请另一实施例提出的提取图片的主色和醒目色的方法的流程示意图；

图6是本申请实施例中获取所述图片的图片路径的方法的流程示意图；

图7是本申请实施例中确定出的图4中的图片醒目色为黄色和黑色示意图；

图8是本申请另一实施例提出的提取图片的主色和醒目色的装置的结构示意图；

图9是本申请另一实施例提出的提取图片的主色和醒目色的装置的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能理解为对本申请的限制。相反，本申请的实施例包括落入所附加权利要求书的精神和内涵范围内的所有变化、修改和等同物。

图1是本申请一实施例提出的提取图片的主色和醒目色的方法的流程示意图，该方法包括：

S11：获取当前要处理的图片，并获取所述图片包含的像素点的颜色值。

当前要处理的图片可以是指网页中的图片。

可选的，所述获取当前要处理的图片，可以包括：

获取所述图片的图片路径；

根据所述图片路径在画布canvas上生成图片。

其中，图片路径可以根据鼠标移动轨迹确定，在确定图片路径后可以采用画布(canvas)获取图片的颜色值。其中，canvas是第五代超文本标记语言(HyperTextMark-upLanguage5，HTML5)中的元素，canvas元素使用JavaScript在网页上绘制图像。

其中，图片包含的像素点的颜色值可以具体是指RGB值，RGB值是一种用来表示颜色的编码方式。其中，R表示红色(Red)，G表示绿色(Green)，B表示蓝色(Blue)。采用这种编码方法，每种颜色都可以用三个变量：红色、绿色以及蓝色的值来表示。

S12：计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色。

其中，主色是一张图片中，在一定色值范围内占比最大的颜色。

可以根据上一步骤中获取到的所述图片包含的像素点的颜色值，来计算第一平均值。

例如，获取到所述图片包含的像素点的颜色值后，可以把颜色值存入一维数组中，该一维数组中每个元素是一个像素点的RGB值，然后遍历一维数组中的元素，对该一维数组中的所有元素进行平均计算，得出第一平均值。

可选的，所述根据所述第一平均值确定所述图片的主色，可以包括：

对所述第一平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的主色。

可以理解的是，本实施例以向下取整为例，在实际实施时，也可以采用四舍五入，或者，向上取整等方式。

例如，第一平均值表征的颜色是黑色，则确定图片的主色是黑色。

S13：计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。

其中，醒目色是一张图片中，与主色形成强烈颜色反差的颜色。

例如，可以重新遍历一维数组中的元素，对每个元素与第一平均值做差，得出第一差值。

可选的，所述根据所述第一差值确定所述图片的醒目色，可以包括：

将所述第一差值大于预设的第一阈值的像素点加入到醒目色数组中；计算第二平均值，所述第二平均值是所述醒目色数组中包含的像素点的颜色值的平均值；根据所述第二平均值，确定所述图片的醒目色。

例如，第一差值包括：第一像素点的颜色值与第一平均值的差值，第二像素点的颜色值与第一平均值的差值，第三像素点的颜色值与第一平均值的差值，以此类推，假设第一像素点的颜色值与第一平均值的差值，以及，第二像素点的颜色值与第一平均值的差值都大于第一阈值，则醒目色数组中包括的像素点是第一像素点和第二像素点，第二平均值是指第一像素点的颜色值和第二像素点的颜色值的平均值。

在得到第二平均值后，可以对所述第二平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。或者，还可以根据第二平均值进行处理，将再次处理后得到的平均值对应的颜色确定为图片的醒目色。

本实施例通过获取当前要处理的图片包含的像素点的颜色值，并根据该颜色值确定图像的主色和醒目色，可以不限于图片的单点颜色检测，从而便捷的提取网页中图片的主色与醒目色。

图2是本申请另一实施例提出的提取图片的主色和醒目色的方法的流程示意图，该方法包括：

S201：提供交互界面。

该交互界面用于提取图片的主色和醒目色。

该交互界面可以以浏览器插件的形式提供。

浏览器插件例如为：Chrome浏览器插件，Firefox浏览器插件，IEActiveX插件，或者，Safari浏览器插件。

参见图3，以谷歌Chrome浏览器插件为例，Chrome插件的图标31出现在Chrome浏览器界面的右上方。

S202：选取当前要处理的图片。

可以在点击Chrome插件的图标31后，选取当前网页上的图片。可以通过鼠标移动以及选中指令选取图片。

具体的，移动鼠标经过网页中的图片时，图片用预设标识进行标识，当确定选取标识的图片后采用预设指令产生选中指令，例如，预设标识是图片周围以蓝色实线环绕，单击鼠标左键产生选中指令，则如图4所示，可以选取图4中的图片41。

需要说明的是，考虑到申请文件不能采用彩色图片，为此，对图片41进行如下说明：图片41的底色是黄色，且模特穿的上衣颜色是黑色。

S203：提取当前要处理的图片的主色和醒目色。

参见图5，所述提取当前要处理的图片的主色和醒目色的流程可以包括：

S501：获取图片路径。

其中，可以在鼠标移动选取图片的过程中，获取图片路径。

可选的，参见图6，所述获取所述图片的图片路径，包括：

S601：接收对预设的插件标识的点击指令。

其中，以谷歌Chrome浏览器插件为例，参见图3，预设的插件标识例如图3中31所示。

用户可以对预设的插件标识进行操作，操作方式例如单击鼠标左侧，产生点击指令。

S602：在接收到所述点击指令后，监听是否发生鼠标移动事件。

具体地，可以采用JavaScript文档对象模型(DocumentObjectModel，DOM)的应用程序编程接口(ApplicationProgrammingInterface，API)，来监听浏览器DOM的鼠标移动onMouseMove事件。

S603：在发生鼠标移动事件后，获取所述鼠标移动事件对应的对象。

具体地，可以采用JavaScriptDOMAPI，获取onMouseMove事件发生的DOM对象。

S604：当所述对象是图片或者具有背景图片时，获取所述对象的图片路径。

在获取DOM对象后，可以根据DOM对象的属性信息判断该DOM对象是否是Image对象或者是否具有背景图片。

如果DOM对象是Image对象或者具有背景图片，则获取该DOM对象的属性信息中的图片路径。

S502：根据所述图片路径在canvas上生成图片。

canvas可以称为画布，是HTML5中的元素，可以使用JavaScript在canvas上生成图片。

S503：采用canvas获取所述图片包含的像素点的颜色值。

可以采用HTML5中的canvas元素来获取图片包含的像素点的颜色值，并把获得的像素点的颜色值存入一维数组中，该一维数组中的元素是每个像素点的颜色值。颜色值具体可以是RGB值，该一组数值可以称为RGB一维数组。

S504：遍历RGB一维数组，计算得出第一平均值，第一平均值是RGB一维数组中所包含的像素点的颜色值的平均值。

例如，一维数组中包括N个像素点的颜色值，分别是A1，A2，…，AN，则第一平均值是：A_{第一平均值}＝(A1+A2+…+AN)/N。

另外，还可以从左到右，从上到下的规则，计算得出像素点的二维矩阵坐标。

S505：根据所述第一平均值确定所述图片的主色。

可以对所述第一平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的主色。

例如，经过计算第一平均值是#ffdf00，其中，ff是RGB值中的R值，df是RGB值中的G值，00是RGB值中的B值，由于表征的是黄色，则参见图7，提取的颜色70包括的图片主色71是黄色。需要说明的是，考虑到申请文件中不能带彩色附图，图中以#ffdf00表示黄色。

S506：重新遍历RGB一维数组，将RGB一维数组中的每个颜色值与第一平均值做差，得出第一差值，将所述第一差值大于预设的第一阈值的像素点存入到醒目色数组中，并确定醒目色数值中的像素点的坐标。

例如，RGB一维数组中包括N个像素点的颜色值，分别是A1，A2，…，AN，且计算出的第一平均值是：A_{第一平均值}＝(A1+A2+…+AN)/N。将A1，A2，…，AN分别与A_{第一平均值}做差，得到A1_第一差值，A2_第一差值，…，AN_第一差值，将得到的第一差值中大于预设的第一阈值的像素点存入醒目色数组中。

另外，可以根据步骤S504中计算得出像素点的二维矩阵坐标确定醒目色数值中的像素点的坐标。

S507：计算第二平均值，所述第二平均值是所述醒目色数组中包含的像素点的颜色值的平均值。

假设醒目色数值包括M个像素点，颜色值分别是B1，B2，…，BM，则第二平均值是B_{第二平均值}＝(B1+B2+…+BM)/M。

S508：初步得到醒目色。

其中，初步得到的醒目色的颜色值是第二平均值。

S509：更新醒目色数值。

其中，可以采用如下方式，更新醒目色数值：

获取所述醒目色数组中包含的像素点的坐标，并根据所述坐标确定与所述醒目色数组中包含的像素点相邻的像素点；

获取所述相邻的像素点的颜色值，并计算第二差值，所述第二差值是所述相邻的像素点的颜色值与所述第二平均值的差值；

根据所述第二差值确定所述醒目色数组中包含的更新后的像素点，其中，所述更新后的像素点对应的第二差值均大于预设的第二阈值。

例如，对应醒目色数组中的第一像素点，根据坐标可以确定其相邻的像素点，例如，确定与其相邻的像素点分别是：第一像素点的左侧的像素点，第一像素点的右侧的像素点，第一像素点的上侧的像素点，第一像素点的下侧的像素点，假设这四个相邻的像素点称为第二像素点，第三像素点，第四像素点，第五像素点，则可以计算第二平均值与第二像素点的颜色值的差值，第二平均值与第三像素点的颜色值的差值，第二平均值与第四像素点的颜色值的差值，第二平均值与第五像素点的颜色值的差值，如果这四个差值都大于第二阈值，则第一像素点位于更新后的醒目色数组中。

S510：计算第三平均值，所述第三平均值是所述更新后的醒目色数组中包含的像素点的颜色值的平均值。

例如，更新后的醒目色数组中包括S个像素点，颜色值分别是C1，C2，…，CS，则第三平均值是C_{第三平均值}＝(C1+C2+…+CS)/S。

S511：对所述第三平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

例如，经过计算第三平均值是#020102，其中，首两位02是RGB值中的R值，01是RGB值中的G值，末两位02是RGB值中的B值，由于020102表征的是黑色，则参见图7，提取的颜色70包括的图片醒目色72是黑色。需要说明的是，考虑到申请文件中不能带彩色附图，图中以#020102表示黑色。

本实施例通过获取当前处理的图片包含的像素点的颜色值，并根据该颜色值得到图片的主色和醒目色，可以方便的确定出图片的主色和醒目色。本实施例通过以浏览器插件形式提供交互界面，可以方便的在浏览器中使用。本实施例通过JavaScript语言作为前端开发的基础脚本语言可以很便捷的对网页进行DOM操作，本实施例通过采用HTML5规范中提供的CanvasAPI可以对图片进行颜色矩阵的获取，通过算法计算出图片的主色与醒目色。

图8是本申请另一实施例提出的提取图片的主色和醒目色的装置的结构示意图，该装置80包括获取模块81、第一计算模块82以及第二计算模块83。

获取模块81用于获取当前要处理的图片，并获取所述图片包含的像素点的颜色值。

当前要处理的图片可以是指网页中的图片。

一个实施例中，参见图9，所述获取模块81具体包括：

第一单元811，用于获取所述图片的图片路径。

可选的，所述第一单元811具体用于：

接收对预设的插件标识的点击指令。

其中，以谷歌Chrome浏览器插件为例，参见图3，预设的插件标识例如图3中31所示。

用户可以对预设的插件标识进行操作，操作方式例如单击鼠标左侧，产生点击指令。

在接收到所述点击指令后，监听是否发生鼠标移动事件。

具体地，可以采用JavaScript文档对象模型(DocumentObjectModel，DOM)的应用程序编程接口(ApplicationProgrammingInterface，API)，来监听浏览器DOM的鼠标移动onMouseMove事件。

在发生鼠标移动事件后，获取所述鼠标移动事件对应的对象。

具体地，可以采用JavaScriptDOMAPI，获取onMouseMove事件发生的DOM对象。

当所述对象是图片或者具有背景图片时，获取所述对象的图片路径。

在获取DOM对象后，可以根据DOM对象的属性信息判断该DOM对象是否是Image对象或者是否具有背景图片。

如果DOM对象是Image对象或者具有背景图片，则获取该DOM对象的属性信息中的图片路径。

第二单元812，用于根据所述图片路径在画布canvas上生成图片，并采用canvas获取所述图片包含的像素点的颜色值。

其中，图片包含的像素点的颜色值可以具体是指RGB值，RGB值是一种用来表示颜色的编码方式。其中，R表示红色(Red)，G表示绿色(Green)，B表示蓝色(Blue)。采用这种编码方法，每种颜色都可以用三个变量：红色、绿色以及蓝色的值来表示。

其中，图片路径可以根据鼠标移动轨迹确定，在确定图片路径后可以采用画布(canvas)获取图片的颜色值。其中，canvas是第五代超文本标记语言(HyperTextMark-upLanguage5，HTML5)中的元素，canvas元素使用JavaScript在网页上绘制图像。可以采用HTML5中的canvas元素来获取图片包含的像素点的颜色值，并把获得的像素点的颜色值存入一维数组中，该一维数组中的元素是每个像素点的颜色值。颜色值具体可以是RGB值，该一组数值可以称为RGB一维数组。

第一计算模块82用于计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色。

其中，主色是一张图片中，在一定色值范围内占比最大的颜色。

可以根据上一步骤中获取到的所述图片包含的像素点的颜色值，来计算第一平均值。

例如，获取到所述图片包含的像素点的颜色值后，可以把颜色值存入一维数组中，该一维数组中每个元素是一个像素点的RGB值，然后遍历一维数组中的元素，对该一维数组中的所有元素进行平均计算，得出第一平均值。

另一个实施例中，所述第一计算模块82具体用于对所述第一平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的主色。

例如，第一平均值表征的颜色是黑色，则确定图片的主色是黑色。

例如，经过计算第一平均值是#ffdf00，其中，ff是RGB值中的R值，df是RGB值中的G值，00是RGB值中的B值，由于表征的是黄色，则参见图7，确定出的图片主色是黄色。需要说明的是，考虑到申请文件中不能带彩色附图，图中以#ffdf00表示黄色。

第二计算模块83用于计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。

其中，醒目色是一张图片中，与主色形成强烈颜色反差的颜色。

例如，可以重新遍历一维数组中的元素，对每个元素与第一平均值做差，得出第一差值。

例如，RGB一维数组中包括N个像素点的颜色值，分别是A1，A2，…，AN，且计算出的第一平均值是：A_{第一平均值}＝(A1+A2+…+AN)/N。将A1，A2，…，AN分别与A_{第一平均值}做差，得到A1_第一差值，A2_第一差值，…，AN_第一差值。

另一个实施例中，所述第二计算模块83具体用于：

将所述第一差值大于预设的第一阈值的像素点加入到醒目色数组中；计算第二平均值，所述第二平均值是所述醒目色数组中包含的像素点的颜色值的平均值；根据所述第二平均值，确定所述图片的醒目色。

例如，第一差值包括：第一像素点的颜色值与第一平均值的差值，第二像素点的颜色值与第一平均值的差值，第三像素点的颜色值与第一平均值的差值，以此类推，假设第一像素点的颜色值与第一平均值的差值，以及，第二像素点的颜色值与第一平均值的差值都大于第一阈值，则醒目色数组中包括的像素点是第一像素点和第二像素点，第二平均值是指第一像素点的颜色值和第二像素点的颜色值的平均值。

在得到第二平均值后，可以对所述第二平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。或者，还可以根据第二平均值进行处理，将再次处理后得到的平均值对应的颜色确定为图片的醒目色。

假设醒目色数值包括M个像素点，颜色值分别是B1，B2，…，BM，则第二平均值是B_{第二平均值}＝(B1+B2+…+BM)/M。

另一个实施例中，所述第二计算模块83进一步具体用于对所述第二平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

其中，初步得到的醒目色的颜色值是第二平均值。

另一个实施例中，所述第二计算模块83进一步具体用于：

获取所述醒目色数组中包含的像素点的坐标，并根据所述坐标确定与所述醒目色数组中包含的像素点相邻的像素点；

获取所述相邻的像素点的颜色值，并计算第二差值，所述第二差值是所述相邻的像素点的颜色值与所述第二平均值的差值；

根据所述第二差值确定所述醒目色数组中包含的更新后的像素点，其中，所述更新后的像素点对应的第二差值均大于预设的第二阈值；

例如，对应醒目色数组中的第一像素点，根据坐标可以确定其相邻的像素点，例如，确定与其相邻的像素点分别是：第一像素点的左侧的像素点，第一像素点的右侧的像素点，第一像素点的上侧的像素点，第一像素点的下侧的像素点，假设这四个相邻的像素点称为第二像素点，第三像素点，第四像素点，第五像素点，则可以计算第二平均值与第二像素点的颜色值的差值，第二平均值与第三像素点的颜色值的差值，第二平均值与第四像素点的颜色值的差值，第二平均值与第五像素点的颜色值的差值，如果这四个差值都大于第二阈值，则第一像素点位于更新后的醒目色数组中。

计算第三平均值，所述第三平均值是所述更新后的像素点的颜色值的平均值，并对所述第三平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

例如，更新后的醒目色数组中包括S个像素点，颜色值分别是C1，C2，…，CS，则第三平均值是C_{第三平均值}＝(C1+C2+…+CS)/S。

例如，经过计算第三平均值是#020102，其中，首两位02是RGB值中的R值，01是RGB值中的G值，末两位02是RGB值中的B值，由于020102表征的是黑色，则参见图7，提取的颜色70包括的图片醒目色72是黑色。需要说明的是，考虑到申请文件中不能带彩色附图，图中以#020102表示黑色。

本实施例通过获取当前要处理的图片包含的像素点的颜色值，并根据该颜色值确定图像的主色和醒目色，可以不限于图片的单点颜色检测，从而便捷的提取网页中图片的主色与醒目色。

为了实现上述实施例，本申请还提出一种移动终端。

本申请实施例的移动终端，包括本申请任一实施例的提取图片的主色和醒目色的装置。

本申请实施例的移动终端，通过获取当前要处理的图片包含的像素点的颜色值，并根据该颜色值确定图像的主色和醒目色，可以不限于图片的单点颜色检测，从而便捷的提取网页中图片的主色与醒目色。

需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是两个或两个以上。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

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

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

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

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (15)

1.一种提取图片的主色和醒目色的方法，其特征在于，包括：

获取当前要处理的图片，并获取所述图片包含的像素点的颜色值；

计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色；

计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。

2.根据权利要求1所述的方法，其特征在于，所述获取当前要处理的图片，并获取所述图片包含的像素点的颜色值，包括：

获取所述图片的图片路径；

根据所述图片路径在画布canvas上生成图片，并采用canvas获取所述图片包含的像素点的颜色值。

3.根据权利要求2所述的方法，其特征在于，所述获取所述图片的图片路径，包括：

接收对预设的插件标识的点击指令；

在接收到所述点击指令后，监听是否发生鼠标移动事件；

在发生鼠标移动事件后，获取所述鼠标移动事件对应的对象；

当所述对象是图片或者具有背景图片时，获取所述对象的图片路径。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述根据所述第一平均值确定所述图片的主色，包括：

对所述第一平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的主色。

5.根据权利要求1-3任一项所述的方法，其特征在于，所述根据所述第一差值确定所述图片的醒目色，包括：

将所述第一差值大于预设的第一阈值的像素点加入到醒目色数组中；

计算第二平均值，所述第二平均值是所述醒目色数组中包含的像素点的颜色值的平均值；

根据所述第二平均值，确定所述图片的醒目色。

6.根据权利要求5所述的方法，其特征在于，所述根据所述第二平均值，确定所述图片的醒目色，包括：

对所述第二平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

7.根据权利要求5所述的方法，其特征在于，所述根据所述第二平均值，确定所述图片的醒目色，包括：

获取所述醒目色数组中包含的像素点的坐标，并根据所述坐标确定与所述醒目色数组中包含的像素点相邻的像素点；

获取所述相邻的像素点的颜色值，并计算第二差值，所述第二差值是所述相邻的像素点的颜色值与所述第二平均值的差值；

根据所述第二差值确定所述醒目色数组中包含的更新后的像素点，其中，所述更新后的像素点对应的第二差值均大于预设的第二阈值；

计算第三平均值，所述第三平均值是所述更新后的像素点的颜色值的平均值，并对所述第三平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

8.一种提取图片的主色和醒目色的装置，其特征在于，包括：

获取模块，用于获取当前要处理的图片，并获取所述图片包含的像素点的颜色值；

第一计算模块，用于计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色；

第二计算模块，用于计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。

9.根据权利要求8所述的装置，其特征在于，所述获取模块具体包括：

第一单元，用于获取所述图片的图片路径；

第二单元，用于根据所述图片路径在画布canvas上生成图片，并采用canvas获取所述图片包含的像素点的颜色值。

10.根据权利要求9所述的装置，其特征在于，所述第一单元具体用于：

接收对预设的插件标识的点击指令；

在接收到所述点击指令后，监听是否发生鼠标移动事件；

在发生鼠标移动事件后，获取所述鼠标移动事件对应的对象；

当所述对象是图片或者具有背景图片时，获取所述对象的图片路径。

11.根据权利要求8-10任一项所述的装置，其特征在于，所述第一计算模块具体用于：

对所述第一平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的主色。

12.根据权利要求8-10任一项所述的装置，其特征在于，所述第二计算模块具体用于：

将所述第一差值大于预设的第一阈值的像素点加入到醒目色数组中；

计算第二平均值，所述第二平均值是所述醒目色数组中包含的像素点的颜色值的平均值；

根据所述第二平均值，确定所述图片的醒目色。

13.根据权利要求12所述的装置，其特征在于，所述第二计算模块进一步具体用于：

对所述第二平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

14.根据权利要求12所述的装置，其特征在于，所述第二计算模块进一步具体用于：

获取所述醒目色数组中包含的像素点的坐标，并根据所述坐标确定与所述醒目色数组中包含的像素点相邻的像素点；

获取所述相邻的像素点的颜色值，并计算第二差值，所述第二差值是所述相邻的像素点的颜色值与所述第二平均值的差值；

根据所述第二差值确定所述醒目色数组中包含的更新后的像素点，其中，所述更新后的像素点对应的第二差值均大于预设的第二阈值；

计算第三平均值，所述第三平均值是所述更新后的像素点的颜色值的平均值，并对所述第三平均值进行向下取整，将取整后的颜色值对应的颜色确定为所述图片的醒目色。

15.一种用户设备，其特征在于，包括：

显示器；

处理器；以及

存储器，所述存储器被配置成存储浏览器客户端，其中，所述浏览器客户端被所述处理器执行时：

获取当前要处理的图片，并获取所述图片包含的像素点的颜色值；

计算第一平均值，所述第一平均值是所述图片包含的像素点的颜色值的平均值，并根据所述第一平均值确定所述图片的主色；

计算第一差值，所述第一差值是所述图片包含的像素点的颜色值与所述第一平均值的差值，并根据所述第一差值确定所述图片的醒目色。