CN113486271A - 一种图像主色调的确定方法、装置以及电子终端 - Google Patents

Abstract

本发明提供了一种图像主色调的确定方法、装置以及电子终端，涉及图像处理技术领域，缓解了服务端的数据处理量较大导致服务器的运行压力较大的技术问题。该方法包括：获取原始图像；通过GUI处理工具中内置的滤镜函数对原始图像进行高斯模糊处理，得到第一中间图像；对第一中间图像的指定区域进行放大处理，得到第二中间图像；从第二中间图像中的色调确定原始图像的主色调。

Description

一种图像主色调的确定方法、装置以及电子终端

技术领域

本申请涉及图像处理技术领域，尤其是涉及一种图像主色调的确定方法、装置以及电子终端。

背景技术

现有的确定图像主色调的常规技术方案，是在后台的服务端通过各种算法提取原始图像的主色调，再将其发送至客户端进行主色调的渲染。例如，服务器针对原始图像通过一系列算法提取主色调后，再将该主色调发送至客户端，客户端渲染基于该主色调进行网页等的渲染。

但是，对于现有的这种确定图像主色调的常规技术方案，服务端进行各种算法等使数据处理量较大，导致服务器的运行压力较大。

发明内容

本申请的目的在于提供一种图像主色调的确定方法、装置以及电子终端，以缓解服务端的数据处理量较大导致服务器的运行压力较大的技术问题。

第一方面，本申请实施例提供了一种图像主色调的确定方法，应用于提供有GUI处理工具的终端；所述方法包括：

获取原始图像；

通过所述GUI处理工具中内置的滤镜函数对所述原始图像进行高斯模糊处理，得到第一中间图像；

对所述第一中间图像的指定区域进行放大处理，得到第二中间图像；

从所述第二中间图像中的色调确定所述原始图像的主色调。

在一个可能的实现中，所述获取原始图像的步骤，包括：

在所述GUI处理工具的超文本标记语言(Hyper Text Markup Language，简称HTML)结构中插入一分隔(DIVision，简称DIV)，所述DIV中赋值有所述原始图像的获取路径；

基于所述获取路径获取所述原始图像。

在一个可能的实现中，所述指定区域为所述第一中间图像的中心区域。

在一个可能的实现中，所述对所述指定中间图像的中心区域进行放大处理，得到第二中间图像的步骤，包括：

通过所述GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，对所述第一中间图像的中心区域进行放大处理，得到第二中间图像。

在一个可能的实现中，所述GUI处理工具的HTML结构中插入有DIV，所述DIV中赋值有尺寸放大倍数；

所述通过所述GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，对所述第一中间图像的中心区域进行放大处理，得到第二中间图像的步骤，包括：

通过所述GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，按照所述尺寸放大倍数对所述第一中间图像的中心区域进行放大处理，得到第二中间图像。

在一个可能的实现中，所述从所述第二中间图像中的色调确定所述原始图像的主色调的步骤，包括：

将所述第二中间图像的中心区域中的色调确定为所述原始图像的主色调。

在一个可能的实现中，所述GUI处理工具的HTML结构中插入有DIV，所述DIV中赋值有截取尺寸；

所述将所述第二中间图像的中心区域中的色调确定为所述原始图像的主色调的步骤，包括：

按照所述截取尺寸截取所述第二中间图像的中心区域，得到第三中间图像，并将所述第三中间图像中的色调确定为所述原始图像的主色调。

在一个可能的实现中，所述按照所述截取尺寸截取所述第二中间图像的中心区域，得到第三中间图像的步骤，包括：

通过所述GUI处理工具中内置的溢出隐藏函数，以所述第二中间图像的中心区域为中心，对所述第二中间图像中溢出所述截取尺寸的区域进行剪裁，得到第三中间图像。

在一个可能的实现中，所述GUI处理工具中还内置有缩放变换函数和溢出隐藏函数；

所述滤镜函数、所述缩放变换函数以及所述溢出隐藏函数均通过层叠样式表(Cascading Style Sheets，简称CSS)代码设置；

其中，所述缩放变换函数用于利用属性矩阵换算法对所述第一中间图像的指定区域进行放大处理；所述溢出隐藏函数用于对所述第二中间图像中的溢出区域进行剪裁。

在一个可能的实现中，所述GUI处理工具为所述终端中设置的浏览器；

所述原始图像的主色调为网页的背景图像的色调；其中，所述网页为所述浏览器浏览的网页。

在一个可能的实现中，在所述从所述第二中间图像中的色调确定所述原始图像的主色调的步骤之后，还包括：

基于所述原始图像的主色调利用所述浏览器渲染所述网页的背景图像，生成包含所述背景图像的图形用户界面。

第二方面，提供了一种图像主色调的确定装置，应用于提供有GUI处理工具的终端；所述装置包括：

获取模块，用于获取原始图像；

第一处理模块，用于通过所述GUI处理工具中内置的滤镜函数对所述原始图像进行高斯模糊处理，得到第一中间图像；

第二处理模块，用于对所述第一中间图像的指定区域进行放大处理，得到第二中间图像；

确定模块，用于从所述第二中间图像中的色调确定所述原始图像的主色调。

第三方面，本申请实施例又提供了一种电子终端，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法的步骤。

第四方面，本申请实施例又提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行上述的第一方面所述方法。

本申请实施例带来了以下有益效果：

本申请实施例提供的一种图像主色调的确定方法、装置以及电子终端，能够获取原始图像，并通过GUI处理工具中内置的滤镜函数对原始图像进行高斯模糊处理从而得到第一中间图像，之后，对第一中间图像的指定区域进行放大处理进而得到第二中间图像，然后，从第二中间图像中的色调确定原始图像的主色调。本方案中，通过终端中GUI处理工具自带的各种图像处理性能，对原始图像进行高斯模糊处理和指定区域放大处理，进而从放大后的图像中确定出原始图像的主色调，实现了将图像主色调提取流程从服务器转移到带GUI处理工具的终端上，进而减轻了服务器的数据处理量以及运行压力，缓解了服务端的数据处理量较大导致服务器的运行压力较大的技术问题，而且，也更加充分的利用了GUI处理工具自带的性能，降低成本。

附图说明

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

图1为本申请实施例提供的应用场景示意图；

图2示出了本申请实施例提供的一种电子终端的结构示意图；

图3为本申请实施例提供的一种图像主色调的确定方法的流程示意图；

图4为本申请实施例提供的一种演示代码示意图；

图5为本申请实施例提供的一种示例性的页面内容示意图；

图6为本申请实施例提供的另一种示例性的页面内容示意图；

图7为本申请实施例提供的另一种示例性的页面内容示意图；

图8为本申请实施例提供的另一种示例性的页面内容示意图；

图9为本申请实施例提供的一种图像主色调的确定装置的结构示意图。

具体实施方式

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

本申请实施例中所提到的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括其他没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

随着网页色彩搭配逐渐丰富，有些网页适当地增加一些色彩渲染，使得网页在视觉感受上得到更多的提升。当然这些色彩渲染不是随便选几种颜色搭配，更多的处理方案是提取某张原始图像的主色调并将其应用到指定的HTML元素上，通常是该图像元素的父元素。例如，从图像和颜色复杂的封面图像中提取主色调并将该主色调的颜色直接应用到整体卡片或网页的背景色中，这样就能达到自动根据原始图像的主色调为网页等背景搭配上适合的颜色，而不是固定某种颜色作为背景使整体网页看上去死板。

目前，提取原始图像的主色调需要用到图像颜色量化算法，主要目的是从彩色图像所能表现的大约16M种颜色中选取最具代表性或出现频率最高的256种颜色。进而整体呈现出一种局部渐变的颜色过渡效果，若原始图像整体色彩深浅比较明显则渐变效果越明显。

现有的技术方案是在后台管理系统上传图像，图像经过服务器(该服务器需交由专业人员开发)通过上述图像颜色量化算法自动提取原始图像的主色调。整体的处理进程都交由服务端处理，同时还需开辟数据库空间以记录每张原始图像对应的主色调。

上述现有的技术方案能够为图像提取主色调，但从性能优化和成本审核两个层面来看，无法具备长久使用的可能性，目前的现有方案具体缺陷如下：

为了对上传的图像自动提取主色调，需由专业人员在服务器里扩展一个自动提取主色调的功能，整个开发流程是需时间成本和人力成本，虽然有些专业网站提供了图像主色调提取服务，但那是需大量的资金购买，若本网站使用图像过多则所需成本就越高；

在服务器里为上传图像提取主色调是需保存一份原始图像文件，防止服务器因某种原因丢失数据文件，通过保存副本能让数据文件快速复原，但是很容易随时间积累过多图像导致服务器运行压力过大从而产生性能瓶颈。

整个对原始图像的主色调提取流程都在服务器上运行，所需的时间成本和人力成本会随着时间的积累会越来越大；

由于难以在用户每次访问图像URL时都提取遍图像的主色调，进而需要开辟数据库空间记录单张原始图像对应的主色调，从而映射出一张原始图像与其主色调的映射数据表，但随之也带来其他问题，即每次接口访问时都需查表获取指定图像的主色调，若数据库发生迁移还需要将这张数据表也迁移过去，这样无时无刻都在增大服务器的运行能力和抗压能力；

图像颜色量化算法整体较难，若不经常接触图像算法的开发者去处理这些问题会有一定的学习成本和接入成本，在整体项目进度过急的情况下不利于开发阶段的排期。

由上述缺陷可知，目前方案中服务器通过各种算法提取原始图像的主色调再将其发送至终端渲染，即整体的主色调提取进程交由服务端处理，使服务端的数据处理量较大，导致服务器的运行压力较大。

基于此，本申请实施例提供了一种图像主色调的确定方法、装置以及电子终端，通过该方法可以缓解现有技术方案中的服务端的数据处理量较大，导致服务器的运行压力较大的技术问题。再者，本申请实施例提供的方案能够使用简单的代码以实现相应的效果，并且无需数据库来存储原始图像所对应主色调的记录，消除对存储对象的依赖，有效降低了前期开发成本以及后期维护成本。

在本公开其中一种实施例中的图像主色调的确定方法可以运行于电子终端。其中，电子终端可以为本地电子终端，电子终端可以运行GUI(图形用户界面)处理工具。图形用户界面(Graphical User Interface，简称GUI，又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。GUI主要功能是实现人与计算机等电子终端的人机交互。它是用户与操作系统之间进行数据传递和互动操控的工具，用户可以通过一定的操作实现对电子终端的控制，同时电子终端会将用户操作的结果通过显示屏进行反馈。作为使用电子信息产品的必备环节，图形用户界面实现了人与软件之间的信息交互。这种人机交互性使得用户的操作更加便捷。

电子终端的图形用户界面(GUI)是电子终端的软硬件系统与用户之间进行数据传递和操控交互的桥梁。电子终端的图形用户界面(GUI)包括具体产品独有的操作系统用户交互界面，例如，开机画面、操作系统用户界面的图标、布局、交互动态呈现方式、指针游标、桌面背景、视窗排列、菜单状态等，以及可运行于不同品牌和型号电子产品的软件，如浏览器和浏览器衍生产品等。

示例性的，如图1所示，图1为本申请实施例提供的应用场景示意图。该应用场景可以包括电子终端(例如，计算机102)和服务器101，该电子终端可以通过有线网络或无线网络与服务器101进行通信。其中电子终端用于运行虚拟桌面和接收用户操作以及与服务器101进行交互，可以通过与服务器101进行交互从而获取原始图像，在运行虚拟桌面时可以利用GUI处理工具实现原始图像及其主色调的渲染。

在本公开其中一种实施例中的图像主色调的确定方法也可以运行于除服务器、电子终端以外的其他电子设备，该电子设备仅需具备GUI处理工具，无需与服务器等其他外界终端进行通讯，例如，没有联网的手机、没有联网的计算机设备等。如图2所示，本申请实施例提供的一种计算机设备102，包括：处理器201、存储器202和总线，存储器202存储有处理器201可执行的机器可读指令，当电子设备运行时，处理器201与存储器202之间通过总线通信，处理器201执行机器可读指令。处理器201是计算机102的控制中心，利用各种接口和线路连接整个计算机的各个部分，通过运行或执行存储在存储器202内的软件程序，以及调用存储在存储器202内的数据，执行计算机102的各种功能和处理数据，从而对计算机进行整体监控。

下面结合附图对本申请实施例进行进一步地介绍。

图3为本申请实施例提供的一种图像主色调的确定方法的流程示意图。

其中，该方法可以应用于提供有GUI处理工具的电子终端。如图3所示，该方法包括：

步骤S310，获取原始图像。

其中，原始图像可以是存储于客户端本地的本地图像，也可以是存储于网络服务器的网络图像。如果获取的是本地图像，则图像路径引用的为该本地图像位于客户端的存储位置；如果获取的是网络图像，则图像路径引用的为该网络图像的网络地址统一资源定位器(Uniform Resource Locator，简称URL)。

需要说明的是，本申请实施例中的GUI处理工具可以为浏览器，也可以为浏览器衍生产品。

步骤S320，通过GUI处理工具中内置的滤镜函数对原始图像进行高斯模糊处理，得到第一中间图像。

其中，高斯模糊(Gaussian Blur)是一种在图像处理软件中常使用的处理效果，通常通过高斯模糊处理减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果像是经过一个毛玻璃在观察图像。从数学的角度来看，图像的高斯模糊过程就是图像与正态分布做卷积，简单来说就是弱化不显眼的细节强化突出的细节。通过高斯模糊的处理方式可以将主色调的细节层次增强，将其他色调的细节层次减弱，达到了动态处理的效果。

示例性的，浏览器作为一种GUI处理工具，其中内置有一原生滤镜函数“filter:blur()”，该函数的作用就是将图像整体的色彩使用高斯模糊的效果处理，减少图像噪声以及降低细节层次。

如图4所示的代码演示中，“filter：blur(30px)”代表对原始图像进行高斯模糊处理，其中括号内的“30px”代表的是高斯函数的标准差，表示模糊的延伸距离，或者是屏幕上有多少像素融在一起，这个值越大，图像越模糊，进而使图像边缘的细节被弱化，而中心区域的主色调细节层次被强化突出。

步骤S330，对第一中间图像的指定区域进行放大处理，得到第二中间图像。

其中，指定区域可以是用户通过操作而指定的第一中间图像中的某区域；也可以是系统提前预设的第一中间图像中的某区域，例如，系统提前预设第一中间图像中的中心区域为该指定区域。

由于高斯模糊的特点是将图像的主色调的细节层次增强，将其他色调的细节层次减弱，通过放大第一中间图像的指定区域部分能够使指定的主色调的显示更加突出，更符合实际应用的需要。

步骤S340，从第二中间图像中的色调确定原始图像的主色调。

在实际应用中，终端可以从第二中间图像的色调中选择出原始图像的主色调，示例性的，选择第二中间图像的中心区域中的色调作为主色调，例如，直接将第二中间图像的中心区域图像作为网页的背景图像。当然，终端也可以从第二中间图像的其他区域中确定原始图像的主色调。

通过终端中GUI处理工具自带的各种图像处理性能，对原始图像进行高斯模糊处理和中心放大处理，进而从中心放大后的图像中确定出原始图像的主色调，实现了将图像主色调提取流程从服务器转移到带GUI处理工具的终端上，进而减轻了服务器的数据处理量以及运行压力，缓解了服务端的数据处理量较大导致服务器的运行压力较大的技术问题，而且，也更加充分的利用了GUI处理工具自带的性能，降低成本。

下面对上述步骤进行详细介绍。

在一些实施例中，可以保持原有HTML结构，通过HTML结构中的指定图像路径来获取原始图像。作为一个示例，该方法可以包括如下步骤：

步骤a)，在GUI处理工具的HTML结构中插入一DIV，DIV中赋值有原始图像的获取路径；

步骤b)，基于获取路径获取原始图像。

对于上述步骤a)，无需修改原有HTML结构，在保留原有HTML结构的基础上可以插入一个新的DIV作为渲染主色调的容器，其插入位置可以根据项目需求而定。同时还可以将待提取主色调的原始图像的图像路径赋值到该DIV的伪元素的指定元素背景样式(background-image)上，以通过提取HTML结构中DIV的指定图像路径获取原始图像。

其中，DIV是层叠样式表中的定位技术，DIV可以用于为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV的属性来控制，或者是通过使用样式表格式化这个块来进行控制。示例性的，如图4所示的代码演示中，第一行的含义就是为DIV赋值名为“主题颜色.png”的原始图像的获取路径。

在实际应用中，DIV可以作为渲染主色调的容器，其尺寸可以由开发人员自定义。在CSS代码的规范中，DIV的长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。图4中的px是一个相对单位，相对的是设备像素(device pixel)，DIV的尺寸被设定为300px宽，175px高。

需要说明的是，DIV的伪元素可以作为附加容器定义，将其尺寸设置成与DIV一致，目的是在固定DIV的尺寸下可自由控制伪元素的尺寸大小，该大小以DIV作为基准参照物。其中，伪元素是一个附加至选择器末的关键词，用于创建一些不在文档树中的元素，并为其添加样式。例如，可以通过“:：before”来在一个元素前增加一些文本，并为这些文本添加样式。用户可以看到这些文本，即使这些文本实际上不在文档树中。

示例性的，图4中所示的代码演示中伪元素的background为背景混合属性，其中，“bg-url”对应的是background-image(图像背景)、“no-repeat”对应的是background-repeat(图像重复方式)、“center/cover”对应的是background-size(图像尺寸方式)，意思是将背景图像设置成不重复且自由适应尺寸。通过这种方式能够使渲染主色调的容器固定尺寸并可对其伪元素自由操作。具体效果如图5所示，图像501所示的“A”形图像即为原始图像，区域502所示的为概念上的DIV区域。

本方案通过保持原有HTML结构并在原有HTML结构中插入赋值有原始图像获取路径的DIV，再基于该获取路径获取原始图像，无需再额外运行一些算法去提取图像主色调，操作流程简单，编程语句简短，节约了开发成本。

在一些实施例中，上述步骤S330中的指定区域可以是用户或系统指定的第一中间图像中的任意区域。作为一个示例，指定区域为所述第一中间图像的中心区域。

在实际应用中，终端可以对第一中间图像的中心区域进行放大处理，从而得到第二中间图像。

由于高斯模糊的特性是能够使图像中的颜色向图像的中心方向流动，进而使整体的增强效果中心化，通过放大第一中间图像的中心区域部分能够使图像整体主色调的显示更加突出，整体的效果更加和谐统一，更符合实际应用的需要。

基于此，对第一中间图像的中心区域进行放大处理的方式可以有多种。作为一个示例，上述步骤S330具体可以包括如下步骤：

步骤c),通过GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，对第一中间图像的中心区域进行放大处理，得到第二中间图像。

在实际应用中，如图6所示，对原始图像利用浏览器自带的原生滤镜函数“filter:blur()”进行高斯模糊处理后，可以得到第一中间图像，原始图像中的“A”形图像被模糊处理为一与字母A相似的模糊三角形图像601。在此基础上，利用浏览器内置的缩放变换函数，即利用属性矩阵换算法的“transform：scale()”函数，可以对第一中间图像的中心区域进行放大处理，得到如图7所示的第二中间图像701。

需要说明的是，由于高斯模糊的特点是将图像的主色调的细节层次增强，将其他色调的细节层次减弱，并且整体的增强效果中心化，通过放大第一中间图像的中心区域部分可以使得主色调显示的更加突出，整体的效果更加和谐统一，更符合实际应用的需要。而且，利用GUI处理工具自带的缩放变换函数对第一中间图像的中心区域进行放大处理，也能够节省成本。

基于上述步骤c)，对于将第一中间图像的中心区域进行放大处理的操作，可以通过对DIV进行赋值尺寸放大倍数来实现。作为一个示例，GUI处理工具的HTML结构中插入有DIV，DIV中赋值有尺寸放大倍数；上述步骤c)可以包括如下步骤：

步骤d)，通过GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，按照尺寸放大倍数对第一中间图像的中心区域进行放大处理，得到第二中间图像。

在实际应用中，如图4所示的代码演示中，“transform：scale(3)”代表对第一中间图像的中心区域进行3倍的放大处理。当然，为使放大效果更为明显，对于图6中的第一中间图像的放大倍数可以远远大于3倍，从而得到图7中的第二中间图像701。

本申请实施例中，可以根据不同的应用情况来选择不同的中心放大倍数，例如，根据所需确定主色调的原始图像的尺寸来选择放大倍数的大小。通过在HTML结构中插入的DIV中赋值尺寸放大倍数，并通过GUI处理工具中内置的缩放变换函数，按照该赋值尺寸放大倍数对第一中间图像的中心区域进行放大处理，实现了更加高效的对第一中间图像的中心区域进行更有效的放大，提高放大处理效率，使得最终确定出的主色调显示更加突出。

在一些实施例中，终端可以直接将第二中间图像的中心区域图像作为背景图像。作为一个示例，上述步骤S340具体可以包括如下步骤：

步骤e)，将第二中间图像的中心区域中的色调确定为原始图像的主色调。

在实际应用中，如图7所示，经由高斯模糊和中心区域放大处理后得到的第二中间图像701，其中心区域的色调是被强化突出过的色调，是最能代表原始图像的主色调，通过将此部分中心区域确定为原始图像的主色调，能够更加有效的代表原始图像。

通过选择第二中间图像的中心区域中的色调确定为原始图像的主色调，能够选择出最能代表原始图像的主色调，达到最佳的显示效果。

基于上述步骤e)，由于第二中间图像是经过放大处理的，因此可能会溢出DIV区域，需对其溢出部分进行截取或隐藏处理，具体可以通过DIV中赋值的截取尺寸来实现。作为一个示例，GUI处理工具的HTML结构中插入有DIV，DIV中赋值有截取尺寸；上述步骤e)可以包括如下步骤：

步骤f)，按照截取尺寸截取第二中间图像的中心区域，得到第三中间图像，并将第三中间图像中的色调确定为原始图像的主色调。

在实际应用中，如图7所示，根据对DIV中赋值的截取尺寸对第二中间图像进行截取，这一尺寸可以与DIV一致，或者以DIV作为基准参照物。截取后可以获得第三中间图像702(即未溢出DIV区域的图像)，而在第三中间图像702(DIV区域)以外的溢出图像703可以舍弃。

通过按照DIV中赋值的截取尺寸对第二中间图像进行中心区域截取，再对截取后的溢出部分进行隐藏处理，能够更加快速高效的保留中心区域的主色调作为原始图像的主色调，提高主色调提取效率。

基于上述步骤f)，在对溢出DIV区域的图像进行隐藏处理时，具体可以利用GUI处理工具中内置的隐藏函数来实现。作为一个示例，上述步骤f)可以包括如下步骤：

步骤g)，通过GUI处理工具中内置的溢出隐藏函数，以第二中间图像的中心区域为中心，对第二中间图像中溢出截取尺寸的区域进行剪裁，得到第三中间图像。

示例性的，如图4所示的代码演示中，“overflow：hidden”定义了对于溢出DIV部分的隐藏操作，使伪元素放大且超出DIV的部分都能够被隐藏，则剩下的DIV区域里的伪元素部分就是最终的主色调渲染区域。具体效果如图7所示，以第二中间图像701的中心区域为中心，对第二中间图像溢出DIV的区域的溢出图像703进行剪裁并隐藏，得到未被隐藏的第三中间图像702。

通过以上的这种截取及溢出隐藏处理，可以保留第二图像中具有强化突出细节的中心区域，剪裁掉弱化细节的边缘区域，使得主色调整体效果得到提升，而且，利用GUI处理工具中自带的溢出隐藏函数来隐藏溢出的图像，节省成本。

在一些实施例中，为了节省开发维护成本，以及充分发挥GUI处理工具的性能，上述各种图像处理的进程均可以使用GUI处理工具中内置的CSS代码完成。作为一个示例，GUI处理工具中还内置有缩放变换函数和溢出隐藏函数；滤镜函数、缩放变换函数以及溢出隐藏函数均通过CSS代码设置；

其中，缩放变换函数用于利用属性矩阵换算法对第一中间图像的指定区域进行放大处理；溢出隐藏函数用于对第二中间图像中的溢出区域进行剪裁。

本申请实施例中，可以获取图像路径并赋值渲染主色调的容器的伪元素中，在渲染图像完毕后通过高斯模糊函数“filter:blur()”弱化不显眼的图像细节和强化突出图像中心区域的细节，再通过“transform:scale()”方法放大中心区域细节，最后通过“overflow:hidden”裁剪掉溢出渲染主色调的容器的区域，最终得到图像的主色调。

示例性的，本方案中整体的数据植入方式可以只涉及到CSS代码而无需任何JavaScript代码，在封装好CSS类后可供那些需提取图像主色调的使用场景全局使用。

由于Javascript代码相比于CSS代码整体偏难，若不经常接触图像算法的开发者去处理这些问题会有一定的学习成本和接入成本，在整体项目进度过急的情况下不利于开发阶段的排期。而且维护CSS代码的成本远小于维护JavaScript代码的成本。利用GUI处理工具中内置的CSS代码完成上述图像处理过程，可以实现使用更小的开发成本达到相同的效果，有效提升项目开发效率。示例性的，CSS代码只需三行，即“overflow:hidden”、“filter:blur()”和“transform:scale()”，相对于服务器那些需要上百行核心代码才能完成一个图像主色调提取流程来说，本方案的所需的成本大大减小。本申请实施例中，上述图像处理的过程均可以使用GUI处理工具中内置的CSS代码完成，节省开发维护成本，充分发挥GUI处理工具的性能。

在一些实施例中，利用GUI处理工具来完成确定图像主色调的方法可以适用于多种使用场景。作为一个示例，GUI处理工具为终端中设置的浏览器；原始图像的主色调为网页的背景图像的色调；其中，网页为浏览器浏览的网页。

在实际应用中，浏览器本身可以是一个GUI处理工具，其内置的fliter系列滤镜函数本身就是为了渲染而高度定制的，所以比在服务器里使用一些开源或收费的第三方图像颜色量化算法，本申请实施例能够更稳妥更高效更低成本，而且无需维护这样一套图像主色调提取流程。

而且，将图像主色调提取流程从服务器转移到浏览器上，无任何与服务器接触的流程，所以完全无需数据库存储这些图像对应主色调的记录，本申请实施例中，能够剔除使用数据库的场景，消除对存储对象的依赖，做到图像动态生成主色调的效果，分担服务器的压力，使浏览器完成这些本职工作，进而减轻了服务器的压力，同时也使浏览器过剩的性能得以利用，达到对现有资源充分利用率的提升。

在一些实施例中，通过浏览器不仅可以完成图像主色调的确定提取进程，还可以基于主色调进行渲染。作为一个示例，在上述步骤S340之后，该方法还可以包括如下步骤：

步骤h)，基于原始图像的主色调利用浏览器渲染网页的背景图像，生成包含背景图像的图形用户界面。

在实际应用中，原始图像的主色调提取本身涉及到GUI批处理操作，而浏览器本身就是一个GUI处理工具，接收返回的数据即可渲染成用户可见的GUI界面。例如，如图8所述，针对图8中左边的原始图像，通过浏览器的主色调确定及渲染过程，可以得到图8中右边的主色调图像，也可以将其作为背景图像。

再者，浏览器自带的transform属性矩阵换算法，可以提升图像在提取过程中的渲染性能。该transform属性矩阵换算法在执行过程中不会改变缓存记录，在图层合成时遍历当前层的节点，利用矩阵公式计算出对应新坐标，可视作一种与图层内容无关的变换，图层中的元素首次生成的位图信息缓存可被反复使用，从而提升渲染性能。

图9提供了一种图像主色调的确定装置的结构示意图。该装置可以应用于提供有GUI处理工具的终端。如图9所示，该装置包括：

获取模块901，用于获取原始图像；

第一处理模块902，用于通过GUI处理工具中内置的滤镜函数对原始图像进行高斯模糊处理，得到第一中间图像；

第二处理模块903，用于对第一中间图像的指定区域进行放大处理，得到第二中间图像；

确定模块904，用于从第二中间图像中的色调确定原始图像的主色调。

在一些实施例中，获取模块901具体用于：

在GUI处理工具的HTML结构中插入一DIV，DIV中赋值有原始图像的获取路径；

基于获取路径获取原始图像。

在一些实施例中，指定区域为所述第一中间图像的中心区域。

在一些实施例中，第二处理模块903具体用于：

通过GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，对第一中间图像的中心区域进行放大处理，得到第二中间图像。

在一些实施例中，GUI处理工具的HTML结构中插入有DIV，DIV中赋值有尺寸放大倍数；第二处理模块903具体用于：

通过GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，按照所尺寸放大倍数对第一中间图像的中心区域进行放大处理，得到第二中间图像。

在一些实施例中，确定模块904具体用于：

将第二中间图像的中心区域中的色调确定为原始图像的主色调。

在一些实施例中，GUI处理工具的HTML结构中插入有DIV，DIV中赋值有截取尺寸；确定模块904具体用于：

按照截取尺寸截取第二中间图像的中心区域，得到第三中间图像，并将第三中间图像中的色调确定为原始图像的主色调。

在一些实施例中，确定模块904还用于：

通过GUI处理工具中内置的溢出隐藏函数，以第二中间图像的中心区域为中心，对第二中间图像中溢出截取尺寸的区域进行剪裁，得到第三中间图像。

在一些实施例中，GUI处理工具中还内置有缩放变换函数和溢出隐藏函数；

滤镜函数、缩放变换函数以及溢出隐藏函数均通过CSS代码设置；

其中，缩放变换函数用于利用属性矩阵换算法对第一中间图像的指定区域进行放大处理；溢出隐藏函数用于对第二中间图像中的溢出区域进行剪裁。

在一些实施例中，GUI处理工具为终端中设置的浏览器；

原始图像的主色调为网页的背景图像的色调；其中，网页为浏览器浏览的网页。

在一些实施例中，该装置还包括：

渲染模块，用于在从第二中间图像中的色调确定原始图像的主色调的之后，基于原始图像的主色调利用浏览器渲染网页的背景图像，生成包含背景图像的图形用户界面。

本申请实施例提供的图像主色调的确定装置，与上述实施例提供的图像主色调的确定方法具有相同的技术特征，所以也能解决相同的技术问题，达到相同的技术效果。

对应于上述图像主色调的确定方法，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有机器可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行上述图像主色调的确定方法的步骤。

本申请实施例所提供的图像主色调的确定装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本申请实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

再例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述图像主色调的确定方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本申请的具体实施方式，用以说明本申请的技术方案，而非对其限制，本申请的保护范围并不局限于此，尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本申请实施例技术方案的范围。都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (14)

1.一种图像主色调的确定方法，其特征在于，应用于提供有GUI处理工具的终端；所述方法包括：

获取原始图像；

通过所述GUI处理工具中内置的滤镜函数对所述原始图像进行高斯模糊处理，得到第一中间图像；

对所述第一中间图像的指定区域进行放大处理，得到第二中间图像；

从所述第二中间图像中的色调确定所述原始图像的主色调。

2.根据权利要求1所述的方法，其特征在于，所述获取原始图像的步骤，包括：

在所述GUI处理工具的HTML结构中插入一DIV，所述DIV中赋值有所述原始图像的获取路径；

基于所述获取路径获取所述原始图像。

3.根据权利要求1所述的方法，其特征在于，所述指定区域为所述第一中间图像的中心区域。

4.根据权利要求3所述的方法，其特征在于，所述对所述第一中间图像的指定区域进行放大处理，得到第二中间图像的步骤，包括：

通过所述GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，对所述第一中间图像的中心区域进行放大处理，得到第二中间图像。

5.根据权利要求4所述的方法，其特征在于，所述GUI处理工具的HTML结构中插入有DIV，所述DIV中赋值有尺寸放大倍数；

所述通过所述GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，对所述第一中间图像的中心区域进行放大处理，得到第二中间图像的步骤，包括：

通过所述GUI处理工具中内置的缩放变换函数利用属性矩阵换算法，按照所述尺寸放大倍数对所述第一中间图像的中心区域进行放大处理，得到第二中间图像。

6.根据权利要求1所述的方法，其特征在于，所述从所述第二中间图像中的色调确定所述原始图像的主色调的步骤，包括：

将所述第二中间图像的中心区域中的色调确定为所述原始图像的主色调。

7.根据权利要求6所述的方法，其特征在于，所述GUI处理工具的HTML结构中插入有DIV，所述DIV中赋值有截取尺寸；

所述将所述第二中间图像的中心区域中的色调确定为所述原始图像的主色调的步骤，包括：

按照所述截取尺寸截取所述第二中间图像的中心区域，得到第三中间图像，并将所述第三中间图像中的色调确定为所述原始图像的主色调。

8.根据权利要求7所述的方法，其特征在于，所述按照所述截取尺寸截取所述第二中间图像的中心区域，得到第三中间图像的步骤，包括：

通过所述GUI处理工具中内置的溢出隐藏函数，以所述第二中间图像的中心区域为中心，对所述第二中间图像中溢出所述截取尺寸的区域进行剪裁，得到第三中间图像。

9.根据权利要求1所述的方法，其特征在于，所述GUI处理工具中还内置有缩放变换函数和溢出隐藏函数；

所述滤镜函数、所述缩放变换函数以及所述溢出隐藏函数均通过CSS代码设置；

其中，所述缩放变换函数用于利用属性矩阵换算法对所述第一中间图像的指定区域进行放大处理；所述溢出隐藏函数用于对所述第二中间图像中的溢出区域进行剪裁。

10.根据权利要求1所述的方法，其特征在于，所述GUI处理工具为所述终端中设置的浏览器；

所述原始图像的主色调为网页的背景图像的色调；其中，所述网页为所述浏览器浏览的网页。

11.根据权利要求10所述的方法，其特征在于，在所述从所述第二中间图像中的色调确定所述原始图像的主色调的步骤之后，还包括：

基于所述原始图像的主色调利用所述浏览器渲染所述网页的背景图像，生成包含所述背景图像的图形用户界面。

12.一种图像主色调的确定装置，其特征在于，应用于提供有GUI处理工具的终端；所述装置包括：

获取模块，用于获取原始图像；

第一处理模块，用于通过所述GUI处理工具中内置的滤镜函数对所述原始图像进行高斯模糊处理，得到第一中间图像；

第二处理模块，用于对所述第一中间图像的指定区域进行放大处理，得到第二中间图像；

确定模块，用于从所述第二中间图像中的色调确定所述原始图像的主色调。

13.一种电子终端，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1至11任一项所述的方法的步骤。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机可运行指令，所述计算机可运行指令在被处理器调用和运行时，所述计算机可运行指令促使所述处理器运行所述权利要求1至11任一项所述的方法。

Images