CN110865856A - 一种界面元素颜色显示方法及装置 - Google Patents
一种界面元素颜色显示方法及装置 Download PDFInfo
- Publication number
- CN110865856A CN110865856A CN201810982547.4A CN201810982547A CN110865856A CN 110865856 A CN110865856 A CN 110865856A CN 201810982547 A CN201810982547 A CN 201810982547A CN 110865856 A CN110865856 A CN 110865856A
- Authority
- CN
- China
- Prior art keywords
- color
- target image
- dominant
- type
- brightness
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/90—Determination of colour characteristics
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2200/00—Indexing scheme for image data processing or generation, in general
- G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
Abstract
本申请实施例公开了一种界面元素颜色显示方法及装置,该方法包括:获取待显示界面包括的目标图像;对待显示界面进行颜色更新处理,包括:确定目标图像的第一主色,根据第一主色在目标图像中的面积占比来确定目标图像的色彩类型,根据色彩类型确定第一辅色,设置第一辅色为前景元素的颜色;将经过颜色更新处理的待显示界面输出给显示设备进行显示。由于目标图像的第一主色的色相与第一辅色的色相接近,目标图像的第一主色与前景元素的颜色之间会有较好的色彩融合性;而且,第一主色与第一辅色在饱和度或者亮度上具有一定的差异,所以目标图像的第一主色与前景元素的颜色之间具有较好的对比度。因此,在用户浏览待显示界面时会产生较强的沉浸感。
Description
技术领域
本申请实施例涉及图像处理领域,更具体的说,涉及界面元素颜色显示方法及装置。
背景技术
目前,很多应用软件的交互界面上会显示图像和前景元素。在很多场景下,前景元素会作为图像的前景,其中,前景元素可以为图标或文字等元素。
为了使前景元素与图像之间形成一定的视觉关联,业内的图像取色工具会先根据一些自定义规则在图像内的多种颜色中选择一种目标颜色,然后自动的将该目标颜色作为前景元素的颜色,从而保证图像的颜色与前景元素的颜色具有一定的相似性,进而使得用户在交互界面上浏览图像和前景元素时更具有沉浸感。
在上述图像取色方法中,选出来的目标颜色的色相与图像的多个颜色的色相可能均会存在较大差异。例如,假设选出来的目标颜色为红色,但是图像的多个颜色中主要为绿色系和蓝色系,所以目标颜色的色相与图像的多个颜色的色相较大差异。如果选出来的目标颜色的色相与图像的多个颜色的色相存在较大差异,且将目标颜色作为前景元素的颜色,那么图像的颜色与前景元素的颜色会存在色彩冲突性强和色彩融合性差的问题,从而导致用户在交互界面上浏览图像和前景元素时无法产生沉浸感。
发明内容
本申请实施例提供一种界面元素颜色显示方法及装置,以使界面上的前景元素的颜色与目标图像的颜色之间具有较好的对比度和色彩融合性。
本申请实施例是这样实现的:
第一方面,本申请实施例提供了一种界面元素颜色显示方法,该方法包括:获取待显示界面包括的目标图像,其中,待显示界面包括前景元素以及背景元素,背景元素为作为前景元素背景的元素,背景元素包括目标图像;对待显示界面进行颜色更新处理,包括:确定目标图像的第一主色,根据第一主色在目标图像中的面积占比来确定目标图像的色彩类型,根据色彩类型确定第一辅色,设置第一辅色为前景元素的颜色;其中,第一主色为目标图像中的主要颜色;第一辅色为跟第一主色的色相接近但又具有饱和度或者亮度差异的颜色;将经过颜色更新处理的待显示界面输出给显示设备进行显示。
在第一方面中,目标图像的第一主色的色相与第一辅色的色相接近,在设置第一辅色为前景元素的颜色以后,目标图像的第一主色与前景元素的颜色之间会有较好的色彩融合性;而且,第一主色与第一辅色在饱和度或者亮度上具有一定的差异,所以第一主色和第一辅色之间还具有较好的对比度,所以目标图像的第一主色与前景元素的颜色之间具有较好的对比度。因此,在用户浏览待显示界面时会产生较强的沉浸感。
在第一方面的一种可能的实现方式中,根据色彩类型确定第一辅色包括:获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个;根据主色调整参数对第一主色进行调整以生成第一亮色辅色和第一暗色辅色;确定第一亮色辅色或第一暗色辅色为第一辅色。
在第一方面的一种可能的实现方式中,获取目标图像的色彩类型对应的主色调整参数包括:在目标图像的色彩类型为多色一般类型或单色彩色类型时,获取多色一般类型或单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,第一亮度调整值和第二亮度调整值分别用于调整第一主色的亮度,第一饱和度调整值和第二饱和度调整值分别用于调整第一主色的饱和度,主色调整参数包括第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值;多色一般类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度大于第三阈值;单色彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0;或者,在目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,获取多色低饱和度类型、多色灰阶类型或单色无彩色类型对应的第一亮度调整值和第二亮度调整值,第一亮度调整值和第二亮度调整值分别用于调整第一主色的亮度,主色调整参数包括第一亮度调整值和第二亮度调整值;多色低饱和度类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度小于第三阈值;多色灰阶类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例大于第二阈值;单色无彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
在第一方面的一种可能的实现方式中,根据主色调整参数对第一主色进行调整以生成第一亮色辅色和第一暗色辅色包括:根据第一亮度调整值和第一饱和度调整值调整第一主色的亮度和饱和度以生成第一亮色辅色,根据第二亮度调整值和第二饱和度调整值调整第一主色的亮度和饱和度以生成第一暗色辅色;或者,根据第一亮度调整值调整第一主色的亮度以生成第一亮色辅色,根据第二亮度调整值调整第一主色的亮度以生成第一暗色辅色。
在第一方面的一种可能的实现方式中,确定第一亮色辅色或第一暗色辅色为第一辅色包括:判断第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值是否大于第四阈值或小于第四阈值的倒数;在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值大于第四阈值或小于第四阈值的倒数时,确定第一亮色辅色为第一辅色;在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值小于第四阈值或大于第四阈值的倒数时,确定第一暗色辅色为第一辅色。
在第一方面的一种可能的实现方式中,确定目标图像的第一主色包括:获取目标图像中的每种颜色;按照预设排列顺序对目标图像中的每种颜色进行排序得到颜色队列,预设排列顺序为预先生成的颜色的排列顺序;根据预设分组法和目标图像中的每种颜色的像素点数量将颜色队列拆分成多个颜色组,多个颜色组中的每个颜色组均包括至少一种颜色;确定多个颜色组中像素点数量最多的目标颜色组;根据目标颜色组中的所有颜色生成第一主色。
在第一方面的一种可能的实现方式中,根据目标颜色组中的所有颜色生成第一主色包括:获取目标颜色组中的每种颜色的红绿蓝三通道值,红绿蓝三通道值包括红色通道值、绿色通道值和蓝色通道值;根据目标颜色组中的每种颜色的红色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标红色通道值;根据目标颜色组中的每种颜色的绿色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标绿色通道值;根据目标颜色组中的每种颜色的蓝色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标蓝色通道值;将目标红色通道值、目标绿色通道值和目标蓝色通道值组成目标红绿蓝三通道值以得到第一主色。
在第一方面的一种可能的实现方式中,在根据第一主色在目标图像中的面积占比来确定目标图像的色彩类型以后,方法还包括:在目标图像的色彩类型为多色类型时,确定多个颜色组中像素点数量第二多的指定颜色组,根据指定颜色组中的所有颜色生成第二主色;多色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值;或者,在目标图像的色彩类型为单色彩色类型时,获取单色彩色类型对应的第二主色调整值,根据第二主色调整值配置第一主色的色相以生成第二主色;单色彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0;或者,在目标图像的色彩类型为单色无彩色类型时,获取单色无彩色类型对应的第二主色调整值,并根据第二主色调整值配置第一主色的亮度以生成第二主色;单色无彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
在第一方面的一种可能的实现方式中,在生成第二主色以后,方法还包括:获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个;根据主色调整参数对第二主色进行调整以生成第二亮色辅色和第二暗色辅色;确定第二亮色辅色或第二暗色辅色为第二辅色,第二辅色为跟第二主色的色相接近但又具有饱和度或者亮度差异的颜色;在接收到将第二辅色设置为前景元素的颜色的指令时,设置第二辅色为前景元素的颜色;设置第二主色为背景图层的颜色,背景图层为透明度不变的图层或透明度渐变的图层,背景元素还包括背景图层,背景图层位于目标图像与前景元素之间。
在第一方面的一种可能的实现方式中,背景元素还包括背景图层,背景图层位于目标图像与前景元素之间,对目标图像进行颜色更新处理还包括:设置第一主色为背景图层的颜色,背景图层为透明度不变的图层或透明度渐变的图层。
在第一方面的一种可能的实现方式中,在确定目标图像的第一主色以后,在将经过颜色更新处理的待显示界面输出给显示设备进行显示以前,方法还包括:在目标图像一侧或多侧延伸出图像区域,其中,图像区域由第一主色构成;将图像区域和目标图像作为更新后的目标图像。
第二方面,本申请实施例提供了一种终端,该装置包括:获取模块,用于获取待显示界面包括的目标图像,其中,待显示界面包括前景元素以及背景元素,背景元素为作为前景元素背景的元素,背景元素包括目标图像;更新模块,用于对待显示界面进行颜色更新处理,包括:确定目标图像的第一主色,根据第一主色在目标图像中的面积占比来确定目标图像的色彩类型,根据色彩类型确定第一辅色,设置第一辅色为前景元素的颜色;其中,第一主色为目标图像中的主要颜色;第一辅色为跟第一主色的色相接近但又具有饱和度或者亮度差异的颜色;显示输出模块,用于将经过颜色更新处理的待显示界面输出给显示设备进行显示。
在第二方面的一种可能的实现方式中,更新模块,具体用于获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个;根据主色调整参数对第一主色进行调整以生成第一亮色辅色和第一暗色辅色;确定第一亮色辅色或第一暗色辅色为第一辅色。
在第二方面的一种可能的实现方式中,更新模块,具体用于在目标图像的色彩类型为多色一般类型或单色彩色类型时,获取多色一般类型或单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,第一亮度调整值和第二亮度调整值分别用于调整第一主色的亮度,第一饱和度调整值和第二饱和度调整值分别用于调整第一主色的饱和度,主色调整参数包括第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值;多色一般类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度大于第三阈值;单色彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0;或者,更新模块,具体用于在目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,获取多色低饱和度类型、多色灰阶类型或单色无彩色类对应的第一亮度调整值和第二亮度调整值,第一亮度调整值和第二亮度调整值分别用于调整第一主色的亮度,主色调整参数包括第一亮度调整值和第二亮度调整值;多色低饱和度类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度小于第三阈值;多色灰阶类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例大于第二阈值;单色无彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
在第二方面的一种可能的实现方式中,更新模块,具体用于根据第一亮度调整值和第一饱和度调整值调整第一主色的亮度和饱和度以生成第一亮色辅色,根据第二亮度调整值和第二饱和度调整值调整第一主色的亮度和饱和度以生成第一暗色辅色;或者,更新模块,具体用于根据第一亮度调整值调整第一主色的亮度以生成第一亮色辅色,根据第二亮度调整值调整第一主色的亮度以生成第一暗色辅色。
在第二方面的一种可能的实现方式中,更新模块,具体用于判断第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值是否大于第四阈值或小于第四阈值的倒数;在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值大于第四阈值或小于第四阈值的倒数时,确定第一亮色辅色为第一辅色;在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值小于第四阈值或大于第四阈值的倒数时,确定第一暗色辅色为第一辅色;第一亮色辅色的亮度区分参数高于第一暗色辅色的亮度区分参数,第一主色的亮度区分参数为根据第一主色的红绿蓝三通道值计算得到的,第一亮色辅色的亮度区分参数为根据第一亮色辅色的红绿蓝三通道值计算得到的,第一暗色辅色的亮度区分参数为根据第一暗色辅色的红绿蓝三通道值计算得到的。
在第二方面的一种可能的实现方式中,更新模块,具体用于获取目标图像中的每种颜色;按照预设排列顺序对目标图像中的每种颜色进行排序得到颜色队列,预设排列顺序为预先生成的颜色的排列顺序;根据预设分组法和目标图像中的每种颜色的像素点数量将颜色队列拆分成多个颜色组,多个颜色组中的每个颜色组均包括至少一种颜色;确定多个颜色组中像素点数量最多的目标颜色组;根据目标颜色组中的所有颜色生成第一主色。
在第二方面的一种可能的实现方式中,更新模块,具体用于获取目标颜色组中的每种颜色的红绿蓝三通道值,红绿蓝三通道值包括红色通道值、绿色通道值和蓝色通道值;根据目标颜色组中的每种颜色的红色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标红色通道值;根据目标颜色组中的每种颜色的绿色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标绿色通道值;根据目标颜色组中的每种颜色的蓝色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标蓝色通道值;将目标红色通道值、目标绿色通道值和目标蓝色通道值组成目标红绿蓝三通道值以得到第一主色。
在第二方面的一种可能的实现方式中,更新模块,还用于在目标图像的色彩类型为多色类型时,确定多个颜色组中像素点数量第二多的指定颜色组,根据指定颜色组中的所有颜色生成第二主色;多色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值;或者,更新模块,还用于在目标图像的色彩类型为单色彩色类型时,获取单色彩色类型对应的第二主色调整值,根据第二主色调整值配置第一主色的色相以生成第二主色;单色彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0;或者,更新模块,还用于在目标图像的色彩类型为单色无彩色类型时,获取单色无彩色类型对应的第二主色调整值,并根据第二主色调整值配置第一主色的亮度以生成第二主色;单色无彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
在第二方面的一种可能的实现方式中,更新模块,还用于获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个;根据主色调整参数对第二主色进行调整以生成第二亮色辅色和第二暗色辅色;确定第二亮色辅色或第二暗色辅色为第二辅色,第二辅色为跟第二主色的色相接近但又具有饱和度或者亮度差异的颜色;在接收到将第二辅色设置为前景元素的颜色的指令时,设置第二辅色为前景元素的颜色;设置第二主色为背景图层的颜色,背景图层为透明度不变的图层或透明度渐变的图层,背景元素还包括背景图层,背景图层位于目标图像与前景元素之间。
在第二方面的一种可能的实现方式中,更新模块,还用于设置第一主色为背景图层的颜色,背景图层为透明度不变的图层或透明度渐变的图层。
在第二方面的一种可能的实现方式中,更新模块,还用于在目标图像一侧或多侧延伸出图像区域,其中,图像区域由第一主色构成;将图像区域和目标图像作为更新后的目标图像。
第三方面,本申请公开了一种终端,包括一个或多个处理器以及存储器;其中,该一个或多个处理器用于读取存储在该存储器中的软件代码并执行如第一方面及第一方面各种实现方式中的方法。
第四方面,本申请公开了一种计算机可读存储介质,该计算机可读存储介质存储有软件代码,该软件代码为在被一个或多个处理器读取后能够执行如第一方面及第一方面各种实现方式中的方法的代码。
附图说明
图1所示的为本申请实施例提供的一种终端界面的示意图;
图2所示的为本申请实施例提供的一种界面元素颜色显示方法的流程图;
图3所示的为本申请实施例提供的一种终端界面的示意图;
图4所示的为图3中A区域内的图像的示意图;
图5所示的为图3中B区域内的图像的示意图;
图6所示的为本申请实施例提供的另一种界面元素颜色显示方法的流程图;
图7所示的为目标图像中每种颜色的排列顺序和每种颜色的像素点数量的示意图;
图8所示的为基于图7首次分组后的示意图;
图9所示的为基于图7最终分组后的示意图;
图10所示的为本申请实施例提供的一种色彩类型的分类示意图;
图11所示的为本申请实施例提供的又一种界面元素颜色显示方法的流程图;
图12所示的为本申请实施例提供的又一种界面元素颜色显示方法的流程图;
图13所示的为本申请实施例提供的又一种界面元素颜色显示方法的流程图;
图14所示的为本申请实施例提供的一种终端的示意图;
图15所示的为本申请实施例提供的一种终端的示意图。
具体实施方式
请参见图1所示,图1所示的为本申请实施例提供的一种终端界面的示意图。在图1中,终端1的触摸屏幕2当前正在显示图库界面3,图库界面3包括文字31、图标32和图像33,图像33作为文字31和图标32的背景,文字31和图标32作为图像33的前景。其中,文字31和图标32属于前景元素,图像33属于背景元素,背景元素作为前景元素的背景。
在图1所示的实施例中,图库界面3上的文字31包括“分享”、“下载”、“删除”、“编辑”和“更多”;图库界面3上的图标32包括“分享”的功能按钮、“下载”的功能按钮、“删除”的功能按钮、“编辑”的功能按钮和“更多”的功能按钮;图库界面3上图像33为一种植物。
在图1所示的实施例中,在终端1接收到显示图像33的指令时,终端1可以先根据图像33中的颜色生成第一主色,并根据第一主色在目标图像33中的面积占比来确定图像33的色彩类型,根据色彩类型确定第一辅色;然后,设置第一辅色为图库界面3上文字31的颜色和图标32的颜色,即设置第一辅色为图库界面3的前景元素的颜色;最后,显示颜色变更后的图库界面3。在终端1根据图像33的第一主色生成第一辅色的过程中,选取的第一主色可以为图像33中的主要颜色,生成的第一辅色可以为跟第一主色的色相接近但又具有饱和度或者亮度差异的颜色。其中,色相接近指的是第一主色与第一辅色的色相差值的绝对值小于阈值,例如,阈值可以为30度。
在图1所示的实施例中,由于第一主色的色相与第一辅色的色相接近,所以文字31的颜色和图标32的颜色与图像33的颜色的色彩融合性较好,即第一主色与第一辅色的色彩融合性较好。而且,第一主色与第一辅色在饱和度或者亮度上具有一定的差异,所以文字31的颜色和图标32的颜色与图像33的颜色具有较好的对比度,即第一主色和第一辅色之间还具有较好的对比度。因此,在用户浏览图库界面3上的文字31、图标32和图像33时,会产生较强的沉浸感。
当然,本申请实施例并不局限于图1所示终端的图库界面,还可以为终端上其他类型的界面。例如,终端的界面还可以为终端的锁屏界面或应用软件的锁屏界面;又如,终端的界面还可以为终端内音乐播放器的界面;又如,终端的界面还可以为终端的通知栏界面。综上,本申请实施例提供的界面元素颜色显示方法的使用场景并不局限于已经提到的几种终端的界面,只要终端的界面包括前景元素和背景元素,那么终端内各种类型的界面都可以使用本申请实施例提供的界面元素颜色显示方法。
图1所示的终端1可以为台式电脑、笔记本电脑、掌上电脑或智能手机等设备。这些设备通常包括一个或多个处理器、存储器以及显示设备。其中,一个或多个处理器用于读取存储器中存储的代码来执行相应的程序,处理器为一个时,可以是CPU;如果为多个时,可以包括一个CPU以及再包括一个或多个图像处理器(如GPU)。这些处理器中的一个或多个可以封装在一个芯片,或者可以独立封装成多个芯片。本申请中,显示设备即为用于进行显示的硬件设备,例如,终端的显示屏、个人电脑的显示器等各种可以用于显示的设备,该设备会通过各种接口与处理器连接,处理器在处理完数据后(如得到待显示界面),可以通过接口发送给显示设备进行显示。
图1介绍了如何将本申请实施例提供的界面元素颜色显示方法应用到一个具体的终端界面上,下面开始详细介绍本申请实施例提供的界面元素颜色显示方法,可以理解,这些方法可以由一个或多个处理器来完成。
请参见图2,图2所示的为本申请实施例提供的一种界面元素颜色显示方法的流程图。利用图2所示的方法可以使终端界面上的前景元素的颜色与目标图像的颜色之间具有较好的对比度和色彩融合性,图2所示的方法可以应用于终端内。图2所示的方法包括以下步骤。
步骤S11、获取待显示界面包括的目标图像。
其中,在不同的技术场景中,终端的待显示界面可以为不同的界面。
例如,在终端开机以后,终端在进入锁屏界面之前,终端可以先获取锁屏界面上包括的目标图像。
又如,请结合图1所示,假设用户向终端1输入一个查看图像33的指令,在终端1接收到查看图像33的指令以后,且在触摸屏幕2显示图库界面3的图像33之前,终端1可以先获取图库界面3的图像33。
在步骤S11中,待显示界面包括前景元素和背景元素,背景元素为作为前景元素背景的元素,背景元素包括目标图像。
例如,请结合图1所示,待显示界面可以为图1中的图库界面3,目标图像可以为图1中的图像33,前景元素可以为图1中的文字31和图标32,背景元素包括图1中的图像33。
在步骤S11中,获取待显示界面包括的目标图像有很多种方式,下面介绍几种具体的方式:
第一种方式,获取待显示界面包括的原始图像,确定原始图像为目标图像。
在第一种方式中,原始图像为待显示界面上的一个完整的图像,目标图像即为该待显示界面上的一个完整的图像。
例如,请结合图1所示,图库界面3包括的图像33可以理解为待显示界面包括的原始图像,目标图像即为图库界面3包括的图像33。
第二种方式,获取待显示界面包括的原始图像,在待显示界面上确定预先设定的目标区域,在原始图像上截取目标区域内的目标图像。
在第二种方式中,原始图像为待显示界面上的一个完整的图像,预先设定的目标区域为待显示界面上预先设定好的一个区域,目标图像即为原始图像在目标区域内显示的图像。
例如,请结合图3和图4所示,图3所示的为一种本申请实施例提供的终端界面的示意图,图4所示的为图3中A区域内的图像的示意图。在图3和图4中,假设预先设定的目标区域为A区域,在图像33上截取A区域内的图像可以得到如图4所示的A区域的目标图像。
第三种方式,获取待显示界面包括的原始图像,在待显示界面上确定前景元素所在的目标区域,在原始图像上截取目标区域内的目标图像。
在第三种方式中,原始图像为待显示界面上的一个完整的图像,目标区域为待显示界面上前景元素所在的区域,目标图像即为原始图像在目标区域内显示的图像。
例如,请结合图3和图5所示,图5所示的为图3中B区域内的图像的示意图。在图3和图5中,由于图库界面3上的文字31和图标32均在B区域,即待显示界面上的前景元素所在的目标区域为B区域,在图像33上截取B区域内的图像可以得到如图5所示的B区域的目标图像。
步骤S12、对待显示界面进行颜色更新处理。
其中,在终端获取待显示界面包括的目标图像以后,终端需要对待显示界面进行颜色更新处理。终端对待显示界面进行颜色更新处理可以包括步骤S121、步骤S122和步骤S123。
步骤S121、确定目标图像的第一主色。
其中,终端确定目标图像的第一主色的方式有很多种。例如,终端可以基于目标图像中的主要颜色生成主色;又如,终端可以选出目标图像中的主要颜色。无论采用哪种方式生成目标图像的主色,主色为目标图像中的主要颜色。
步骤S122、根据第一主色在目标图像中的面积占比来确定目标图像的色彩类型,根据色彩类型确定第一辅色。
其中,第一主色在目标图像中的面积占比,指的是目标图像中第一主色的像素点数量与目标图像的像素点数量的比值。例如,假设目标图像中第一主色的像素点数量为500个,目标图像的像素点数量为1000个,那么第一主色在目标图像中的面积占比为500÷1000=50%。
色彩类型的种类有很多,在后面的实施例中会详细的介绍色彩类型的多个种类。
终端根据色彩类型确定第一辅色的方式有很多种,无论采用哪种方式,均需要遵循以下原则:第一辅色的色相与第一主色的色相接近,而且,第一辅色与第一主色要具有饱和度或者亮度的差异。
步骤S123、设置第一辅色为前景元素的颜色。
其中,在终端根据色彩类型确定第一辅色以后,终端需要设置第一辅色为前景元素的颜色。
步骤S13、将经过颜色更新处理的待显示界面输出给显示设备进行显示。
例如,处理器包括CPU时,可以通过CPU与显示设备之间的接口来进行显示。
在图2所示的实施例中,目标图像的第一主色的色相与第一辅色的色相接近,在设置第一辅色为前景元素的颜色以后,目标图像的第一主色与前景元素的颜色之间会有较好的色彩融合性;而且,第一主色与第一辅色在饱和度或者亮度上具有一定的差异,所以第一主色和第一辅色之间还具有较好的对比度,所以目标图像的第一主色与前景元素的颜色之间具有较好的对比度。因此,在用户浏览待显示界面时会产生较强的沉浸感。
在图2所示的实施例中,在步骤S123以后,即在设置第一辅色为前景元素的颜色以后,还可以包括以下步骤:设置第一主色为背景图层的颜色。
其中,背景元素还包括背景图层,背景图层位于目标图像与前景元素之间,背景图层为透明度不变的图层或透明度渐变的图层。
为了更好的在目标图像中凸显出前景元素,可以将第一主色设置为背景图层的颜色。由于背景图层位于目标图像与前景元素之间,所以背景图层可以作为前景元素的衬托,进而凸显出前景元素。而且,第一主色的色相与第一辅色的色相接近,背景图层的颜色与前景元素的颜色之间会有较好的色彩融合性;另外,第一主色与第一辅色在饱和度或者亮度上具有一定的差异,所以第一主色和第一辅色之间还具有较好的对比度,所以背景图层的颜色与前景元素的颜色之间具有较好的对比度。因此,在用户浏览待显示界面时会产生较强的沉浸感。
在图2所示的实施例中,在步骤S121以后,即在确定目标图像的第一主色以后,还可以包括以下步骤:在目标图像一侧或多侧延伸出图像区域,其中,图像区域由第一主色构成;将图像区域和目标图像作为更新后的目标图像。
其中,在终端确定目标图像的第一主色以后,终端还可以在目标图像的一侧或多侧延伸出图像区域,可以将前景元素设置在这个图像区域上,从而可以避免前景元素位于目标图像上进而遮挡目标图像,用户可以看到没有前景元素遮挡的目标图像;而且,前景元素的颜色为第一辅色,将第一主色作为图像区域的颜色,可以保证图像区域的颜色与前景元素的颜色之间具有较好的对比度。因此,在用户浏览待显示界面时会产生较强的沉浸感。
请参见图6所示,图6所示的为本申请实施例提供的另一种界面元素颜色显示方法的流程图。图6所示的实施例为图2的步骤S121的具体实现方式,即图6所示的实施例为如何确定目标图像的第一主色。图6所示的方法包括以下步骤。
步骤S21、获取目标图像中的每种颜色。
其中,在终端获取待显示界面包括的目标图像以后,终端需要先获取到目标图像中的每种颜色,以便于终端利用目标图像中的每种颜色来得到目标图像中的主要颜色,并利用目标图像中的主要颜色生成第一主色。目标图像中的主要颜色可以为一种颜色,也可以为多种颜色。
例如,请结合图1所示,假设图库界面3包括的图像33拥有20种颜色。在终端1获取图库界面3包括的图像33以后,终端1需要获取图像33上的20种颜色。
步骤S22、将目标图像中的每种颜色分成多个颜色组,多个颜色组中的每个颜色组均包括至少一种颜色。
其中,如果某个颜色组中包括至少两种颜色,那么该颜色组内的所有颜色均是相近似的颜色。
由于将目标图像中的每种颜色分成多个颜色组的方式有很多种,下面介绍一种具体的实现方式:
将目标图像中的每种颜色分成多个颜色组可以按照以下方式来实现:首先,按照预设排列顺序对目标图像中的每种颜色进行排序得到颜色队列,预设排列顺序为预先生成的颜色的排列顺序;然后,根据预设分组法和目标图像中的每种颜色的像素点数量将颜色队列拆分成多个颜色组。
下面通过实例介绍如何将目标图像中的每种颜色分成多个颜色组。
请参见图7、图8和图9所示,图7所示的为目标图像中每种颜色的排列顺序和每种颜色的像素点数量的示意图,图7中X轴上的每个字母(A至T)均代表一种颜色,图7中Y轴上的数字代表每种颜色的像素点数量。图8所示的为基于图7首次分组后的示意图。图9所示的为基于图7最终分组后的示意图。
例如,假设目标图像的尺寸为27像素×4像素,目标图像的像素点数量为108个,目标图像拥有20种颜色。
首先,在终端获取到目标图像的20种颜色以后,终端可以按照色相的角度由小到大的顺序对目标图像的20种颜色进行排列得到颜色队列,色相的角度由小到大的顺序为0度至359度,颜色队列中20种颜色的排列顺序为图7中X轴上20种颜色的排列顺序。
然后,终端需要在颜色队列中的20种颜色上标注每种颜色对应的像素点数量,即颜色A拥有3个像素点,颜色B拥有6个像素点,…,颜色T拥有6个像素点。
其次,采用二分查找法将颜色队列拆分成多个颜色组。具体的,在图7的X轴上从原点开始,将X轴上的每种颜色的像素点数量进行累加,直至累加后的像素点数量大于目标图像的像素点数量的一半,将当前累加到的颜色作为划分点,将图7的X轴上的20种颜色分成第一颜色组和第二颜色组。在图7中,将X轴上的每种颜色的像素点数量进行累加,在由颜色A的像素点数量累加到颜色K的像素点数量时,累加后的像素点数量=3+6+5+4+7+8+7+6+2+2+5=55>54,即累加后的像素点数量55大于目标图像的像素点数量108的一半54,此时,将图7的X轴上的颜色A至颜色K作为第一颜色组,将图7的X轴上的颜色L至颜色T作为第二颜色组。此时,可以参见图8所示的效果,图8所示的为将颜色队列拆分成两个颜色组,这两个颜色组分别为第一颜色组和第二颜色组。
如果预先确定了将颜色队列拆分成预设数量个颜色组,那么便可以采用二分查找法对每个颜色组继续拆分,直至拆分出来的颜色组的数量为预设数量。
例如,假设预先确定了将颜色队列拆分成8个颜色组,那么便可以采用二分查找法对第一颜色组继续拆分得到第三颜色组和第四颜色组,并采用二分查找法对第二颜色组继续拆分得到第五颜色组和第六颜色组。此时,一共有4个颜色组,分别为第三颜色组、第四颜色组、第五颜色组和第六颜色组,还需要采用二分查找法再对每个颜色组拆分一次才能够得到8个颜色组,即采用二分查找法对第三颜色组进行拆分得到第七颜色组和第八颜色组,采用二分查找法对第四颜色组进行拆分得到第九颜色组和第十颜色组,采用二分查找法对第五颜色组进行拆分得到第十一颜色组和第十二颜色组,采用二分查找法对第六颜色组进行拆分得到第十三颜色组和第十四颜色组。
请结合图9所示,终端经过3次采用二分查找法对颜色队列进行拆分,最终得到8个颜色组,8个颜色组包括第七颜色组、第八颜色组、第九颜色组、第十颜色组、第十一颜色组、第十二颜色组、第十三颜色组和第十四颜色组。其中,第七颜色组包括颜色A、颜色B、颜色C和颜色D,第八颜色组包括颜色E和颜色F,第九颜色组包括颜色G和颜色H,第十颜色组包括颜色I、颜色J和颜色K,第十一颜色组包括颜色L、颜色M和颜色N,第十二颜色组包括颜色O和颜色P,第十三颜色组包括颜色Q和颜色R,第十四颜色组包括颜色S和颜色T。
在图7、图8和图9所示的实施例中,终端将目标图像中的20种颜色拆分成8个颜色组。当然,预设排列顺序并不局限于本申请实施例已经提供的色相的角度由小到大的顺序,还可以采用其他的排序方式,例如,还可以为色相的角度由大到小的顺序等方式。而且,预设分组法并不局限于本申请实施例已经提供的二分查找法,还可以采用其他的分组方式。
步骤S23、确定多个颜色组中像素点数量最多的目标颜色组。
其中,在终端将目标图像中的每种颜色分成多个颜色组以后,每个颜色组都具有一种或多种颜色,且每个颜色组中每种颜色的像素点数量是可以获取到的,所以终端便可以确定出多个颜色组中像素点数量最多的目标颜色组。
例如,请结合图9所示,终端经过3次采用二分查找法对颜色队列进行拆分,最终得到8个颜色组,8个颜色组包括第七颜色组、第八颜色组、第九颜色组、第十颜色组、第十一颜色组、第十二颜色组、第十三颜色组和第十四颜色组。通过图9可知,第七颜色组拥有18个像素点,第八颜色组拥有15个像素点,第九颜色组拥有13个像素点,第十颜色组拥有9个像素点,第十一颜色组拥有19个像素点,第十二颜色组拥有11个像素点,第十三颜色组拥有12个像素点,第十四颜色组拥有11个像素点。经过对比后可以得知,第十一颜色组为8个颜色组中像素点数量最多的一个颜色组,即第十一颜色组为目标颜色组。
步骤S24、根据目标颜色组中的所有颜色生成第一主色。
其中,由于根据目标颜色组中的所有颜色生成第一主色的方式有很多种,下面介绍一种具体的实现方式:
首先,获取目标颜色组中的每种颜色的红绿蓝三通道值,红绿蓝三通道值包括红色通道值、绿色通道值和蓝色通道值;然后,根据目标颜色组中的每种颜色的红色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例计算目标红色通道值,根据目标颜色组中的每种颜色的绿色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例计算目标绿色通道值,根据目标颜色组中的每种颜色的蓝色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例计算目标蓝色通道值;最后,将目标红色通道值、目标绿色通道值和目标蓝色通道值组成目标红绿蓝三通道值以得到第一主色。
例如,请结合图9所示,第十一颜色组为目标颜色组,第十一颜色组包括颜色L、颜色M和颜色N,颜色L的像素点数量为8,颜色M的像素点数量为5,颜色N的像素点数量为6,第十一颜色组拥有19个像素点。其中,颜色L的红色通道值、颜色M的红色通道值和颜色N的红色通道值分别为L(R)、M(R)和N(R),颜色L的绿色通道值、颜色M的绿色通道值和颜色N的绿色通道值分别为L(G)、M(G)和N(G),颜色L的蓝色通道值、颜色M的蓝色通道值和颜色N的蓝色通道值分别为L(B)、M(B)和N(B)。
目标红色通道值=L(R)×8/(8+5+6)+M(R)×5/(8+5+6)+N(R)×6/(8+5+6),目标绿色通道值=L(G)×8/(8+5+6)+M(G)×5/(8+5+6)+N(G)×6/(8+5+6),目标蓝色通道值=L(B)×8/(8+5+6)+M(B)×5/(8+5+6)+N(B)×6/(8+5+6)。
其中,8/(8+5+6)为颜色L的像素点数量与第十一颜色组的像素点数量的比值,即颜色L的像素点数量在目标颜色组中所占比例,5/(8+5+6)为颜色M的像素点数量与第十一颜色组的像素点数量的比值,即颜色M的像素点数量在目标颜色组中所占比例,6/(8+5+6)为颜色N的像素点数量与第十一颜色组的像素点数量的比值,即颜色N的像素点数量在目标颜色组中所占比例。
最后,将目标红色通道值、目标绿色通道值和目标蓝色通道值组成在一起得到目标红绿蓝三通道值(也即直接将这些值作为目标红绿蓝三通道值)并将目标红绿蓝三通道值作为第一主色的红绿蓝三通道值。
例如,假设目标红色通道值为255,目标绿色通道值为100,目标蓝色通道值为50,将目标红色通道值255、目标绿色通道值100和目标蓝色通道值50组合在一起得到目标红绿蓝三通道值(255,100,50),并将目标红绿蓝三通道值(255,100,50)作为第一主色的红绿蓝三通道值。此时,第一主色的红绿蓝三通道值为(255,100,50)。
在图6所示的实施例中,本申请实施例提供了一种生成第一主色的方法,由于目标颜色组是多个颜色组中像素点数量最多的颜色组,如果目标颜色组包括至少两种相似的颜色,那么根据目标颜色组中的所有颜色生成的第一主色可以更好的反映出目标图像的主要颜色。
请参见图10所示,图10所示的为本申请实施例提供的一种色彩类型的分类示意图。由于本申请实施例提供了较多的色彩类型,下面简要介绍一下本申请实施例提供的色彩类型。
在图10中,色彩类型包括多色类型A和单色类型B,其中,多色类型A包括多色灰阶类型A-1和多色非灰阶类型A-2,多色非灰阶类型A-2包括多色低饱和度类型A-2-1和多色一般类型A-2-2,单色类型B包括单色无彩色类型B-1和单色彩色类型B-2。
多色类型A用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值。其中,第一阈值为预先设定的值,例如,第一阈值可以为90%。多色类型根据目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例分为多色灰阶类型A-1和多色非灰阶类型A-2。
多色灰阶类型A-1用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例大于第二阈值。其中,第二阈值为预先设定的值,例如,第二阈值可以为90%。
多色非灰阶类型A-2用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值。其中,第二阈值为预先设定的值,例如,第二阈值可以为90%。其中,多色非灰阶类型A-2包括多色低饱和度类型A-2-1和多色一般类型A-2-2。
多色低饱和度类型A-2-1用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度小于第三阈值。其中,第三阈值为预先设定的值,例如,第三阈值可以为10%。
多色一般类型A-2-2于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度大于第三阈值。
单色类型B用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值。单色类型B包括单色无彩色类型B-1和单色彩色类型B-2。
单色无彩色类型B-1用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
单色彩色类型B-2用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0。
请结合图6所示,在步骤S24以后,即在终端根据目标颜色组中的所有颜色生成第一主色以后,终端还可以生成更多的主色,更多的主色可以为用户提供更多的选择。由于生成更多的主色方式有很多种,下面介绍三种生成第二主色的方式。
第一种方式,在目标图像的色彩类型为多色类型时,确定多个颜色组中像素点数量第二多的指定颜色组,根据指定颜色组中的所有颜色生成第二主色。
在第一种方式中,如果目标图像的色彩类型为多色类型,终端可以在拆分的多个颜色组中找到像素点数量第二多的指定颜色组。最后,根据指定颜色组中的所有颜色生成第二主色。关于“根据指定颜色组中的所有颜色生成第二主色”的实现方式,可以参照步骤S24中“根据目标颜色组中的所有颜色生成第一主色”的实现方式。
例如,请结合图9所示,在目标图像的色彩类型为多色类型时,终端会确定8个颜色组中像素点数量第二多的第七颜色组,然后终端会根据第七颜色组中的颜色A、颜色B、颜色C和颜色D生成第二主色。
第二种方式,在目标图像的色彩类型为单色彩色类型时,获取单色彩色类型对应的第二主色调整值,根据第二主色调整值配置第一主色的色相以生成第二主色。
在第二种方式中,如果目标图像的色彩类型为单色彩色类型,终端会获取单色彩色类型对应的第二主色调整值,并根据第二主色调整值配置第一主色的色相以生成第二主色。
例如,假设第一主色为红色,第一主色的色相为0度,第一主色的饱和度为100%,第一主色的亮度为100%。在目标图像的色彩类型为单色彩色类型时,终端会获取单色彩色类型对应的第二主色调整值,假设单色彩色类型对应的第二主色调整值为将第一主色的色相增加180度,根据第二主色调整值配置第一主色的色相以生成第二主色,得到的第二主色的色相为180度,第二主色的饱和度为100%,第二主色的亮度为100%,此时,第二主色是一种淡青色。
第三种方式,在目标图像的色彩类型为单色无彩色类型时,获取单色无彩色类型对应的第二主色调整值,并根据第二主色调整值配置第一主色的亮度以生成第二主色。
在第三种方式中,如果目标图像的色彩类型为单色无彩色类型,终端会获取单色无彩色类型对应的第二主色调整值,并根据第二主色调整值配置第一主色的亮度以生成第二主色。
例如,假设目标图像的第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于90%,且第一主色的饱和度等于0,说明目标图像的色彩类型为单色无彩色类型。假设第一主色为黑色,第一主色的色相为0度,第一主色的饱和度为0%,第一主色的亮度为0%,在目标图像的色彩类型为单色无彩色类型时,终端会获取单色无彩色类型对应的第二主色调整值,假设单色无彩色类型对应的第二主色调整值为将第一主色的亮度增加20%,根据第二主色调整值配置第一主色的色相以生成第二主色,得到的第二主色的色相为0度,第二主色的饱和度为0%,第二主色的亮度为20%。
又如,假设目标图像的第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于90%,且第一主色的饱和度等于0,说明目标图像的色彩类型为单色无彩色类型。假设第一主色为白色,第一主色的色相为0度,第一主色的饱和度为0%,第一主色的亮度为100%,在目标图像的色彩类型为单色无彩色类型时,终端会获取单色无彩色类型对应的第二主色调整值,假设单色无彩色类型对应的第二主色调整值为将第一主色的亮度减少20%,根据第二主色调整值配置第一主色的色相以生成第二主色,得到的第二主色的色相为0度,第二主色的饱和度为0%,第二主色的亮度为80%。
再如,假设目标图像的第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于90%,且第一主色的饱和度等于0,说明目标图像的色彩类型为单色无彩色类型。假设第一主色为灰色,第一主色的色相为0度,第一主色的饱和度为0%,第一主色的亮度为50%,在目标图像的色彩类型为单色无彩色类型时,终端会获取单色无彩色类型对应的第二主色调整值,假设单色无彩色类型对应的第二主色调整值为将第一主色的亮度减少25%,根据第二主色调整值配置第一主色的色相以生成第二主色,得到的第二主色的色相为0度,第二主色的饱和度为0%,第二主色的亮度为25%。
在生成第二主色以后,还可以根据主色调整参数和第二主色生成第二辅色。具体的,终端需要先获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个;然后,终端根据主色调整参数对第二主色进行调整以生成第二亮色辅色和第二暗色辅色;其次,确定第二亮色辅色或第二暗色辅色为第二辅色,第二辅色为跟第二主色的色相接近但又具有饱和度或者亮度差异的颜色,色相接近指的是第二主色与第二辅色的色相差值的绝对值小于阈值,例如,阈值可以为30度。
其中,终端获取目标图像的色彩类型对应的主色调整参数的具体过程与图12所示的实施例的步骤S41类似,可以参见图12所示的实施例的步骤S41中的详细描述。终端根据主色调整参数对第二主色进行调整以生成第二亮色辅色和第二暗色辅色与图12所示的实施例的步骤S42类似,可以参见图12所示的实施例的步骤S42中的详细描述。终端确定第二亮色辅色或第二暗色辅色为第二辅色与图12所示的实施例的步骤S43类似,可以参见图12所示的实施例的步骤S43中的详细描述。
在终端根据主色调整参数对第二主色进行调整以生成第二辅色以后,如果用户希望将第二辅色设置为前景元素的颜色,那么用户可以向终端输入指令。在终端接收到用户输入的将第二辅色设置为前景元素的颜色的指令时,终端设置第二辅色为前景元素的颜色,从而可以给用户更多的选择。
在终端设置第二辅色为前景元素的颜色以后,为了更好的在目标图像中凸显出前景元素,终端还可以在背景元素上增加一个背景图层,以使该背景图层位于目标图像与前景元素之间,背景图层可以为透明度不变的图层或透明度渐变的图层。
其中,由于背景图层位于目标图像与前景元素之间,所以背景图层可以作为前景元素的衬托,进而凸显出前景元素。而且,第二主色的色相与第二辅色的色相接近,背景图层的颜色与前景元素的颜色之间会有较好的色彩融合性;另外,第二主色与第二辅色在饱和度或者亮度上具有一定的差异,所以第二主色和第二辅色之间还具有较好的对比度,所以背景图层的颜色与前景元素的颜色之间具有较好的对比度。因此,在用户浏览待显示界面时会产生较强的沉浸感。
请结合图6所示,在步骤S23以后且在步骤S24以前,还可以包括以下步骤:判断目标图像的色彩类型是否为多色灰阶类型或多色低饱和度类型;在目标图像的色彩类型为多色灰阶类型或多色低饱和度类型时,将目标颜色组中的红绿蓝三通道值不相同的颜色转换成红绿蓝三通道值相同的颜色,再执行步骤S24;在目标图像的色彩类型不为多色灰阶类型或多色低饱和度类型时,执行步骤S24。
其中,在步骤S23以后,即终端确定多个颜色组中像素点数量最多的目标颜色组以后,终端需要判断目标图像的色彩类型是否为多色灰阶类型或多色低饱和度类型,如果目标图像的色彩类型为多色灰阶类型,那么说明在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例大于第二阈值,即目标图像中大部分的像素点的颜色为黑色、白色或灰色,为了保证生成的第一主色符合目标图像的主色调,所以终端会将目标颜色组中存在具有色彩的像素点进行去色处理,以使目标颜色组中存在具有色彩的像素点转换成黑色、白色或灰色。
同理,如果目标图像的色彩类型为多色低饱和度类型,说明目标图像中大部分的像素点的颜色的饱和度较低,即目标图像的色彩度较低,所以目标图像更倾向于黑色、白色或灰色,为了保证生成的第一主色符合目标图像的主色调,所以终端会将目标颜色组中存在具有色彩的像素点进行去色处理,以使目标颜色组中存在具有色彩的像素点转换成黑色、白色或灰色。
存在多种方式可以“将目标颜色组中的红绿蓝三通道值不相同的颜色转换成红绿蓝三通道值相同的颜色”,即存在多种去色处理的方法,下面简要介绍一种方式。
例如,可以使用去色处理公式=R*0.299+G*0.587+B*0.114。假设目标颜色组中存在10个像素点,其中,10个像素点中有9个像素点的颜色为黑色、白色或灰色,即9个像素点的红绿蓝三通道值相同,10个像素点中有1个目标像素点的颜色为红色,这个红色的目标像素点的红绿蓝三通道值为(255,0,0)。在终端判断出目标图像的色彩类型为多色灰阶类型或多色低饱和度类型时,终端会将目标颜色组中的红绿蓝三通道值不相同的颜色转换成红绿蓝三通道值相同的颜色,即终端利用去色处理公式来将这个红色的目标像素点转换为红绿蓝三通道值相同的颜色。具体的,由于红色的目标像素点的红绿蓝三通道值为(255,0,0),即R=255,G=0,B=0,那么去色处理公式=R*0.299+G*0.587+B*0.114=255*0.299+0*0.587+0*0.114=76.245≈76,并将76作为目标像素点的红绿蓝三通道值,即目标像素点的红绿蓝三通道值为(76,76,76),此时,目标像素点为灰色。
请参见图11所示,图11所示的为本申请实施例提供的又一种界面元素颜色显示方法的流程图。图11所示的实施例为图2的步骤S121的具体实现方式,即图11所示的实施例为如何确定目标图像的第一主色。图11所示的方法包括以下步骤。
步骤S31、获取目标图像中的每种颜色。
步骤S32、确定目标图像中的每种颜色中对应的像素点数量最多的第一颜色。
步骤S33、确定第一颜色为第一主色。
在步骤S31至步骤S33中,在终端获取待显示界面包括的目标图像以后,终端需要先获取到目标图像中的每种颜色,以便于终端在目标图像中的每种颜色中确定出像素点数量最多的第一颜色,最后便可将第一颜色作为第一主色。
例如,假设目标图像中一共有3种颜色,分别为颜色A、颜色B和颜色C,其中,目标图像中的颜色A拥有200个像素点,目标图像中的颜色B拥有150个像素点,目标图像中的颜色C拥有100个像素点。终端可以确定目标图像中的3种颜色中对应的像素点数量最多的颜色为颜色A,此时,终端会将颜色A确定为第一主色。
在图11所示的实施例中,在步骤S33以后,即在确定第一颜色为第一主色以后,还可以采用以下方式得到第二主色:首先,确定目标图像中的每种颜色中对应的像素点数量第二多的第二颜色;然后,确定第二颜色为第二主色。
例如,假设目标图像中一共有3种颜色,分别为颜色A、颜色B和颜色C,其中,目标图像中的颜色A拥有200个像素点,目标图像中的颜色B拥有150个像素点,目标图像中的颜色C拥有100个像素点。终端可以确定目标图像中的3种颜色中对应的像素点数量最多的颜色为颜色A,终端还可以确定目标图像中的3种颜色中对应的像素点数量第二多的颜色为颜色B,终端会将颜色B确定为第二主色。
请参见图12所示,图12所示的为本申请实施例提供的又一种界面元素颜色显示方法的流程图。图12所示的实施例为图2的步骤S122的具体实现方式,即图12所示的实施例为如何根据色彩类型确定第一辅色。图12所示的方法包括以下步骤。
步骤S41、获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个。
其中,不同的色彩类型会对应不同的主色调整参数。由于获取目标图像的色彩类型对应的主色调整参数的情况有很多种,下面介绍两种情况:
第一种情况,在目标图像的色彩类型为多色一般类型或单色彩色类型时,获取多色一般类型或单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值。
在第一种情况中,第一亮度调整值和第二亮度调整值分别用于调整主色的亮度,第一饱和度调整值和第二饱和度调整值分别用于调整主色的饱和度,主色调整参数包括第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值。
例如,请参见表1和图10所示,表1所示的为色彩类型与主色调整参数之间的映射关系。根据表1可知,如果色彩类型为多色一般类型A-2-2或单色彩色类型B-2,那么与之对应的主色调整参数包括第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,其中,第一亮度调整值为1.0,第一饱和度调整0.2,第二亮度调整值为0.2,第二饱和度调整值为1.0。
表1
第二种情况,在目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,获取多色低饱和度类型、多色灰阶类型或单色无彩色类型对应的第一亮度调整值和第二亮度调整值。
在第二种情况中,第一亮度调整值和第二亮度调整值分别用于调整主色的亮度,主色调整参数包括第一亮度调整值和第二亮度调整值。
例如,请参见表2和图10所示,表2所示的为色彩类型与主色调整参数之间的映射关系。根据表2可知,如果色彩类型为多色低饱和度类型A-2-1、多色灰阶类型A-1或单色无彩色类型B-1,那么与之对应的主色调整参数包括第一亮度调整值和第二亮度调整值,其中,第一亮度调整值为1.0,第二亮度调整值为0.2。
表2
步骤S42、根据主色调整参数对第一主色进行调整以生成第一亮色辅色和第一暗色辅色。
在目标图像的色彩类型为多色一般类型或单色彩色类型时,终端会获取多色一般类型或单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,然后,终端会根据第一亮度调整值和第一饱和度调整值调整第一主色的亮度和饱和度以生成第一亮色辅色,根据第二亮度调整值和第二饱和度调整值调整第一主色的亮度和饱和度以生成第一暗色辅色。
请结合表1和图10所示,例如,如果色彩类型为多色一般类型A-2-2或单色彩色类型B-2,那么与之对应的主色调整参数包括第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,其中,第一亮度调整值为1.0,第一饱和度调整0.2,第二亮度调整值为0.2,第二饱和度调整值为1.0。在终端获取到这四个调整值以后,终端会根据第一亮度调整值1.0和第一饱和度调整值0.2调整第一主色的亮度和饱和度以生成第一亮色辅色,根据第二亮度调整值0.2和第二饱和度调整值1.0调整第一主色的亮度和饱和度以生成第一暗色辅色,从而得到两种辅色。
在目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,终端会获取多色低饱和度类型、多色灰阶类型或单色无彩色类型对应的第一亮度调整值和第二亮度调整值,然后,终端会根据第一亮度调整值调整第一主色的亮度以生成第一亮色辅色,根据第二亮度调整值调整第一主色的亮度以生成第一暗色辅色。
请结合表2和图10所示,例如,如果色彩类型为多色低饱和度类型A-2-1、多色灰阶类型A-1或单色无彩色类型B-1,那么与之对应的主色调整参数包括第一亮度调整值和第二亮度调整值,其中,第一亮度调整值为1.0,第二亮度调整值为0.2。在终端获取到这两个调整值以后,终端会根据第一亮度调整值1.0调整第一主色的亮度以生成第一亮色辅色,根据第二亮度调整值0.2调整第一主色的亮度以生成第一暗色辅色,从而得到两种辅色。
步骤S43、确定第一亮色辅色或第一暗色辅色为第一辅色。
在步骤S43中,可以按照以下方式来确定第一亮色辅色或第一暗色辅色为第一辅色。首先,终端会判断第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值是否大于第四阈值或小于第四阈值的倒数。在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值大于第四阈值或小于第四阈值的倒数时,确定第一亮色辅色为第一辅色。在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值小于第四阈值或大于第四阈值的倒数时,确定第一暗色辅色为第一辅色。
其中,第一亮色辅色的亮度区分参数高于第一暗色辅色的亮度区分参数,第一主色的亮度区分参数为根据主色的红绿蓝三通道值计算得到的,第一亮色辅色的亮度区分参数为根据第一亮色辅色的红绿蓝三通道值计算得到的,第一暗色辅色的亮度区分参数为根据第一暗色辅色的红绿蓝三通道值计算得到的。
如果第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值大于第四阈值或小于第四阈值的倒数,说明第一主色与第一亮色辅色之间的对比度是合适的,终端便会确定第一亮色辅色为第一辅色,以使前景元素的颜色与目标图像的颜色之间具有较好的对比度;如果第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值小于第四阈值或大于第四阈值的倒数,说明第一主色与第一亮色辅色之间的对比度是不合适的,终端便会确定第一暗色辅色为第一辅色,以使前景元素的颜色与目标图像的颜色之间具有较好的对比度。
得到颜色的亮度区分参数有多种方式,下面介绍一种具体的实现方式:
第一步,获取目标颜色的红绿蓝三通道值。
第二步,分别计算目标颜色的红绿蓝三通道值与255的比值。
第三步,判断目标颜色的红色通道值与255的比值是否小于目标值。如果是,利用第一公式对目标颜色的红绿蓝三通道值与255的比值进行计算得到目标红色通道值;否则,利用第二公式对目标颜色的红绿蓝三通道值与255的比值进行计算得到目标红色通道值。
其中,对于目标颜色的绿色通道值和目标颜色的蓝色通道值,采用与目标颜色的红色通道值相同的方式进行判断和计算,进而得到目标绿色通道值和目标蓝色通道值。
第四步,利用第三公式对目标红色通道值、目标绿色通道值和目标蓝色通道值进行计算得到目标颜色的亮度区分参数。
例如,假设目标值为0.03928。首先,终端获取到目标颜色的红绿蓝三通道值为(255,0,0),即目标颜色的红色通道值R1=255,目标颜色的绿色通道值G1=0,目标颜色的蓝色通道值B1=0。然后,终端会计算目标颜色的红色通道值R1与255的比值R2=255÷255=1,目标颜色的绿色通道值与255的比值G2=0÷255=0,目标颜色的蓝色通道值与255的比值B2=0÷255=0。其次,终端会判断R2是否小于目标值0.03928,终端经过判断可以得知R2大于目标值0.03928,那么终端便会利用公式((R2+0.055)÷1.055)2.4来计算目标红色通道值R3,经过计算R3=((R2+0.055)÷1.055)2.4=((1+0.055)÷1.055)2.4=1;终端还会判断G2是否小于目标值0.03928,终端经过判断可以得知G2小于目标值0.03928,那么终端便会利用公式G2÷12.92来计算目标红色通道值G3,经过计算G3=G2÷12.92=0÷12.92=0;终端还会判断B2是否小于目标值0.03928,终端经过判断可以得知B2小于目标值0.03928,那么终端便会利用公式B2÷12.92来计算目标红色通道值B3,经过计算B3=B2÷12.92=0÷12.92=0。在终端得到目标红色通道值R3、目标绿色通道值G3和目标蓝色通道值B3以后,终端会利用公式0.2126×R3+0.7152×G3+0.0722×B3对目标红色通道值R3、目标绿色通道值G3和目标蓝色通道值B3进行计算得到目标颜色的亮度区分参数L,经过计算L=0.2126×R3+0.7152×G3+0.0722×B3=0.2126×1+0.7152×0+0.0722×0=1+0+0=1。此时,终端便得到了目标颜色的亮度区分参数L。
当然,关于颜色的亮度区分参数的计算方式并不局限于已经提供的方式,还可以采用其他的方式。利用颜色的亮度区分参数的计算方式可以分别计算第一主色的亮度区分参数、第一亮色辅色的亮度区分参数和第一暗色辅色的亮度区分参数。
请参见图13所示,图13所示的为本申请实施例提供的又一种界面元素颜色显示方法的流程图。图13所示的方法包括以下步骤。
步骤S51、获取待显示界面包括的目标图像。
其中,待显示界面包括背景元素,背景元素包括目标图像和背景图层,目标图像作为背景图层的背景。
关于步骤S51的具体方式,可以参见图2所示的步骤S11的详细介绍。
步骤S52、对待显示界面进行颜色更新处理。
其中,在终端获取待显示界面包括的目标图像以后,终端需要先根据目标图像中的颜色生成第一主色,然后终端会设置第一主色为背景图层的颜色,以完成对待显示界面进行颜色更新处理。终端对待显示界面进行颜色更新处理可以包括步骤S521和步骤S522。
步骤S521、根据目标图像中的颜色生成第一主色。
其中,第一主色为目标图像中的主要颜色。
关于步骤S521的具体方式,可以参见图2所示的步骤S121的详细介绍。
步骤S522、设置第一主色为背景图层的颜色。
其中,背景图层可以为透明度不变的图层或透明度渐变的图层。
步骤S53、将经过颜色更新处理的待显示界面输出给显示设备进行显示。
在图13所示的实施例中,终端设置第一主色为背景图层的颜色,而且,目标图像作为背景图层的背景。由于第一主色为目标图像中的主要颜色,所以背景图层的颜色与目标图像的颜色之间会有较好的色彩融合性。
在图13所示的实施例中,关于如何具体的根据目标图像中的颜色生成第一主色,可以参见图6所示的实施例和图11所示的实施例。
请参见图14所示,图14所示的为本申请实施例提供的一种终端的示意图。该终端包括以下模块:
获取模块1,用于获取待显示界面包括的目标图像,其中,待显示界面包括前景元素以及背景元素,背景元素为作为前景元素背景的元素,背景元素包括目标图像。具体详细的实现方式,请参考上述图2所示的方法实施例中步骤S11对应的详细描述。
更新模块2,用于对待显示界面进行颜色更新处理,包括:确定目标图像的第一主色,根据第一主色在目标图像中的面积占比来确定目标图像的色彩类型,根据色彩类型确定第一辅色,设置第一辅色为前景元素的颜色。其中,第一主色为目标图像中的主要颜色。第一辅色为跟第一主色的色相接近但又具有饱和度或者亮度差异的颜色。具体详细的实现方式,请参考上述图2所示的方法实施例中步骤S12对应的详细描述。
显示输出模块3,用于将经过颜色更新处理的待显示界面输出给显示设备进行显示。具体详细的实现方式,请参考上述图2所示的方法实施例中步骤S13对应的详细描述。
在一种可实现的实施例中,更新模块2,具体用于获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个。根据主色调整参数对第一主色进行调整以生成第一亮色辅色和第一暗色辅色。确定第一亮色辅色或第一暗色辅色为第一辅色。
在一种可实现的实施例中,更新模块2,具体用于在目标图像的色彩类型为多色一般类型或单色彩色类型时,获取多色一般类型或单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,第一亮度调整值和第二亮度调整值分别用于调整第一主色的亮度,第一饱和度调整值和第二饱和度调整值分别用于调整第一主色的饱和度,主色调整参数包括第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值。多色一般类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度大于第三阈值。单色彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0。
在一种可实现的实施例中,更新模块2,具体用于在目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,获取多色低饱和度类型、多色灰阶类型或单色无彩色类型对应的第一亮度调整值和第二亮度调整值,第一亮度调整值和第二亮度调整值分别用于调整第一主色的亮度,主色调整参数包括第一亮度调整值和第二亮度调整值。多色低饱和度类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例小于第二阈值,且第一主色的饱和度小于第三阈值。多色灰阶类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值,且在目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与目标图像对应的像素点数量的比例大于第二阈值。单色无彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
在一种可实现的实施例中,更新模块2,具体用于根据第一亮度调整值和第一饱和度调整值调整第一主色的亮度和饱和度以生成第一亮色辅色,根据第二亮度调整值和第二饱和度调整值调整第一主色的亮度和饱和度以生成第一暗色辅色。
在一种可实现的实施例中,更新模块2,具体用于根据第一亮度调整值调整第一主色的亮度以生成第一亮色辅色,根据第二亮度调整值调整第一主色的亮度以生成第一暗色辅色。
在一种可实现的实施例中,更新模块2,具体用于判断第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值是否大于第四阈值或小于第四阈值的倒数。在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值大于第四阈值或小于第四阈值的倒数时,确定第一亮色辅色为第一辅色。在第一主色的亮度区分参数与第一亮色辅色的亮度区分参数的比值小于第四阈值或大于第四阈值的倒数时,确定第一暗色辅色为第一辅色。第一亮色辅色的亮度区分参数高于第一暗色辅色的亮度区分参数,第一主色的亮度区分参数为根据第一主色的红绿蓝三通道值计算得到的,第一亮色辅色的亮度区分参数为根据第一亮色辅色的红绿蓝三通道值计算得到的,第一暗色辅色的亮度区分参数为根据第一暗色辅色的红绿蓝三通道值计算得到的。
在一种可实现的实施例中,更新模块2,具体用于获取目标图像中的每种颜色。按照预设排列顺序对目标图像中的每种颜色进行排序得到颜色队列,预设排列顺序为预先生成的颜色的排列顺序。根据预设分组法和目标图像中的每种颜色的像素点数量将颜色队列拆分成多个颜色组,多个颜色组中的每个颜色组均包括至少一种颜色。确定多个颜色组中像素点数量最多的目标颜色组。根据目标颜色组中的所有颜色生成第一主色。
在一种可实现的实施例中,更新模块2,具体用于获取目标颜色组中的每种颜色的红绿蓝三通道值,红绿蓝三通道值包括红色通道值、绿色通道值和蓝色通道值。根据目标颜色组中的每种颜色的红色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标红色通道值。根据目标颜色组中的每种颜色的绿色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标绿色通道值。根据目标颜色组中的每种颜色的蓝色通道值和目标颜色组中的每种颜色的像素点数量在目标颜色组中所占比例,计算目标蓝色通道值。将目标红色通道值、目标绿色通道值和目标蓝色通道值组成目标红绿蓝三通道值以得到第一主色。
在一种可实现的实施例中,更新模块2,还用于在目标图像的色彩类型为多色类型时,确定多个颜色组中像素点数量第二多的指定颜色组,根据指定颜色组中的所有颜色生成第二主色。多色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例小于第一阈值。
在一种可实现的实施例中,更新模块2,还用于在目标图像的色彩类型为单色彩色类型时,获取单色彩色类型对应的第二主色调整值,根据第二主色调整值配置第一主色的色相以生成第二主色。单色彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度大于0。
在一种可实现的实施例中,更新模块2,还用于在目标图像的色彩类型为单色无彩色类型时,获取单色无彩色类型对应的第二主色调整值,并根据第二主色调整值配置第一主色的亮度以生成第二主色。单色无彩色类型用于指示第一主色在目标图像中对应的像素点数量与目标图像对应的像素点数量的比例大于第一阈值,且第一主色的饱和度等于0。
在一种可实现的实施例中,更新模块2,还用于获取目标图像的色彩类型对应的主色调整参数,主色调整参数包括亮度和饱和度中的至少一个。根据主色调整参数对第二主色进行调整以生成第二亮色辅色和第二暗色辅色。确定第二亮色辅色或第二暗色辅色为第二辅色,第二辅色为跟第二主色的色相接近但又具有饱和度或者亮度差异的颜色。在接收到将第二辅色设置为前景元素的颜色的指令时,设置第二辅色为前景元素的颜色。设置第二主色为背景图层的颜色,背景图层为透明度不变的图层或透明度渐变的图层,背景元素还包括背景图层,背景图层位于目标图像与前景元素之间。
在一种可实现的实施例中,更新模块2,还用于设置第一主色为背景图层的颜色,背景图层为透明度不变的图层或透明度渐变的图层。
在一种可实现的实施例中,更新模块2,还用于在目标图像一侧或多侧延伸出图像区域,其中,图像区域由第一主色构成;将图像区域和目标图像作为更新后的目标图像。
请参见图15所示,图15所示的为本申请实施例提供的一种终端的示意图。该终端15包括中央处理器151、图像处理器152、I/O设备153、内存154和非易失性(non-volatilememory,NVM)存储器155。图15中的终端15等同于图1中的终端1,关于图15中的终端15的详细介绍可以参见图1对应的实施例中对于终端1的详细说明。
图15所示的终端15可以运行图2、图6、图11、图12和图13对应的实施例中界面元素颜色显示方法。结合图2和图15所示,中央处理器151可以利用I/O设备153在非易失性存储器155中获取待显示界面包括的目标图像,并利用I/O设备153将目标图像存入内存154中。然后,中央处理器151会对待显示界面进行颜色更新处理。最后,图像处理器152会接收中央处理器151处理后得到的经过颜色更新处理的待显示界面,并将经过颜色更新处理的待显示界面输出给显示设备进行显示。
Claims (24)
1.一种界面元素颜色显示方法,其特征在于,所述方法包括:
获取待显示界面包括的目标图像,其中,所述待显示界面包括前景元素以及背景元素,所述背景元素为作为所述前景元素背景的元素,所述背景元素包括所述目标图像;
对所述待显示界面进行颜色更新处理,包括:确定所述目标图像的第一主色,根据所述第一主色在所述目标图像中的面积占比来确定所述目标图像的色彩类型,根据所述色彩类型确定第一辅色,设置所述第一辅色为所述前景元素的颜色;其中,所述第一主色为所述目标图像中的主要颜色,所述第一辅色为跟所述第一主色的色相接近但又具有饱和度或者亮度差异的颜色;
将经过所述颜色更新处理的所述待显示界面输出给显示设备进行显示。
2.根据权利要求1所述的界面元素颜色显示方法,其特征在于,根据所述色彩类型确定第一辅色包括:
获取所述目标图像的色彩类型对应的主色调整参数,所述主色调整参数包括亮度和饱和度中的至少一个;
根据所述主色调整参数对所述第一主色进行调整以生成第一亮色辅色和第一暗色辅色;
确定所述第一亮色辅色或所述第一暗色辅色为第一辅色。
3.根据权利要求2所述的界面元素颜色显示方法,其特征在于,获取所述目标图像的色彩类型对应的主色调整参数包括:
在所述目标图像的色彩类型为多色一般类型或单色彩色类型时,获取所述多色一般类型或所述单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,所述第一亮度调整值和所述第二亮度调整值分别用于调整所述第一主色的亮度,所述第一饱和度调整值和所述第二饱和度调整值分别用于调整所述第一主色的饱和度,所述主色调整参数包括所述第一亮度调整值、所述第二亮度调整值、所述第一饱和度调整值和所述第二饱和度调整值;其中,
所述多色一般类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于所述第一阈值,且在所述目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与所述目标图像对应的像素点数量的比例小于所述第二阈值,且所述第一主色的饱和度大于第三阈值;
所述单色彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度大于0;
或者,
在所述目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,获取所述多色低饱和度类型、所述多色灰阶类型或所述单色无彩色类型对应的第一亮度调整值和第二亮度调整值,所述第一亮度调整值和所述第二亮度调整值分别用于调整所述第一主色的亮度,所述主色调整参数包括所述第一亮度调整值和所述第二亮度调整值;其中,
所述多色低饱和度类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于第一阈值,且在所述目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与所述目标图像对应的像素点数量的比例小于第二阈值,且所述第一主色的饱和度小于第三阈值;
所述多色灰阶类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于所述第一阈值,且在所述目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第二阈值;
所述单色无彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度等于0。
4.根据权利要求3所述的界面元素颜色显示方法,其特征在于,根据所述主色调整参数对所述第一主色进行调整以生成第一亮色辅色和第一暗色辅色包括:
根据所述第一亮度调整值和所述第一饱和度调整值调整所述第一主色的亮度和饱和度以生成所述第一亮色辅色,根据所述第二亮度调整值和所述第二饱和度调整值调整所述第一主色的亮度和饱和度以生成所述第一暗色辅色;
或者,
根据所述第一亮度调整值调整所述第一主色的亮度以生成所述第一亮色辅色,根据所述第二亮度调整值调整所述第一主色的亮度以生成所述第一暗色辅色。
5.根据权利要求4所述的界面元素颜色显示方法,其特征在于,确定所述第一亮色辅色或所述第一暗色辅色为第一辅色包括:
判断所述第一主色的亮度区分参数与所述第一亮色辅色的亮度区分参数的比值是否大于第四阈值或小于所述第四阈值的倒数;
在所述第一主色的亮度区分参数与所述第一亮色辅色的亮度区分参数的比值大于所述第四阈值或小于所述第四阈值的倒数时,确定所述第一亮色辅色为第一辅色;
在所述第一主色的亮度区分参数与所述第一亮色辅色的亮度区分参数的比值小于所述第四阈值或大于所述第四阈值的倒数时,确定所述第一暗色辅色为第一辅色。
6.根据权利要求1所述的界面元素颜色显示方法,其特征在于,确定所述目标图像的第一主色包括:
获取所述目标图像中的每种颜色;
按照预设排列顺序对所述目标图像中的每种颜色进行排序得到颜色队列,所述预设排列顺序为预先生成的颜色的排列顺序;
根据预设分组法和所述目标图像中的每种颜色的像素点数量将所述颜色队列拆分成多个颜色组,所述多个颜色组中的每个颜色组均包括至少一种颜色;
确定所述多个颜色组中像素点数量最多的目标颜色组;
根据所述目标颜色组中的所有颜色生成第一主色。
7.根据权利要求6所述的界面元素颜色显示方法,其特征在于,根据所述目标颜色组中的所有颜色生成第一主色包括:
获取所述目标颜色组中的每种颜色的红绿蓝三通道值,所述红绿蓝三通道值包括红色通道值、绿色通道值和蓝色通道值;
根据所述目标颜色组中的每种颜色的所述红色通道值和所述目标颜色组中的每种颜色的像素点数量在所述目标颜色组中所占比例,计算目标红色通道值;
根据所述目标颜色组中的每种颜色的所述绿色通道值和所述目标颜色组中的每种颜色的像素点数量在所述目标颜色组中所占比例,计算目标绿色通道值;
根据所述目标颜色组中的每种颜色的所述蓝色通道值和所述目标颜色组中的每种颜色的像素点数量在所述目标颜色组中所占比例,计算目标蓝色通道值;
将所述目标红色通道值、所述目标绿色通道值和所述目标蓝色通道值组成目标红绿蓝三通道值以得到第一主色。
8.根据权利要求6所述的界面元素颜色显示方法,其特征在于,在根据所述第一主色在所述目标图像中的面积占比来确定所述目标图像的色彩类型以后,所述方法还包括:
在所述目标图像的色彩类型为多色类型时,确定所述多个颜色组中像素点数量第二多的指定颜色组,根据所述指定颜色组中的所有颜色生成第二主色;所述多色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于第一阈值;
或者,
在所述目标图像的色彩类型为单色彩色类型时,获取所述单色彩色类型对应的第二主色调整值,根据所述第二主色调整值配置所述第一主色的色相以生成第二主色;所述单色彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度大于0;
或者,
在所述目标图像的色彩类型为单色无彩色类型时,获取所述单色无彩色类型对应的第二主色调整值,并根据所述第二主色调整值配置所述第一主色的亮度以生成第二主色;所述单色无彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度等于0。
9.根据权利要求8所述的界面元素颜色显示方法,其特征在于,在生成第二主色以后,所述方法还包括:
获取所述目标图像的色彩类型对应的主色调整参数,所述主色调整参数包括亮度和饱和度中的至少一个;
根据所述主色调整参数对所述第二主色进行调整以生成第二亮色辅色和第二暗色辅色;
确定所述第二亮色辅色或所述第二暗色辅色为第二辅色,所述第二辅色为跟所述第二主色的色相接近但又具有饱和度或者亮度差异的颜色;
在接收到将所述第二辅色设置为所述前景元素的颜色的指令时,设置所述第二辅色为所述前景元素的颜色;
设置所述第二主色为背景图层的颜色,所述背景图层为透明度不变的图层或透明度渐变的图层,所述背景元素还包括所述背景图层,所述背景图层位于所述目标图像与所述前景元素之间。
10.根据权利要求1至7任意一项所述的界面元素颜色显示方法,其特征在于,所述背景元素还包括背景图层,所述背景图层位于所述目标图像与所述前景元素之间,所述对所述目标图像进行颜色更新处理还包括:
设置所述第一主色为所述背景图层的颜色,所述背景图层为透明度不变的图层或透明度渐变的图层。
11.根据权利要求1至7任意一项所述的界面元素颜色显示方法,其特征在于,在所述确定所述目标图像的第一主色以后,在将经过所述颜色更新处理的所述待显示界面输出给显示设备进行显示以前,所述方法还包括:
在所述目标图像一侧或多侧延伸出图像区域,其中,所述图像区域由所述第一主色构成;
将所述图像区域和所述目标图像作为更新后的目标图像。
12.一种终端,其特征在于,包括:
获取模块,用于获取待显示界面包括的目标图像,其中,所述待显示界面包括前景元素以及背景元素,所述背景元素为作为所述前景元素背景的元素,所述背景元素包括所述目标图像;
更新模块,用于对所述待显示界面进行颜色更新处理,包括:确定所述目标图像的第一主色,根据所述第一主色在所述目标图像中的面积占比来确定所述目标图像的色彩类型,根据所述色彩类型确定第一辅色,设置所述第一辅色为所述前景元素的颜色;其中,所述第一主色为所述目标图像中的主要颜色;所述第一辅色为跟所述第一主色的色相接近但又具有饱和度或者亮度差异的颜色;
显示输出模块,用于将经过所述颜色更新处理的所述待显示界面输出给显示设备进行显示。
13.根据权利要求12所述的终端,其特征在于:
所述更新模块,具体用于获取所述目标图像的色彩类型对应的主色调整参数,所述主色调整参数包括亮度和饱和度中的至少一个;根据所述主色调整参数对所述第一主色进行调整以生成第一亮色辅色和第一暗色辅色;确定所述第一亮色辅色或所述第一暗色辅色为第一辅色。
14.根据权利要求13所述的终端,其特征在于:
所述更新模块,具体用于在所述目标图像的色彩类型为多色一般类型或单色彩色类型时,获取所述多色一般类型或所述单色彩色类型对应的第一亮度调整值、第二亮度调整值、第一饱和度调整值和第二饱和度调整值,所述第一亮度调整值和所述第二亮度调整值分别用于调整所述第一主色的亮度,所述第一饱和度调整值和所述第二饱和度调整值分别用于调整所述第一主色的饱和度,所述主色调整参数包括所述第一亮度调整值、所述第二亮度调整值、所述第一饱和度调整值和所述第二饱和度调整值;所述多色一般类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于所述第一阈值,且在所述目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与所述目标图像对应的像素点数量的比例小于所述第二阈值,且所述第一主色的饱和度大于第三阈值;所述单色彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度大于0;
或者,
所述更新模块,具体用于在所述目标图像的色彩类型为多色低饱和度类型、多色灰阶类型或单色无彩色类型时,获取所述多色低饱和度类型、所述多色灰阶类型或所述单色无彩色类对应的第一亮度调整值和第二亮度调整值,所述第一亮度调整值和所述第二亮度调整值分别用于调整所述第一主色的亮度,所述主色调整参数包括所述第一亮度调整值和所述第二亮度调整值;所述多色低饱和度类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于第一阈值,且在所述目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与所述目标图像对应的像素点数量的比例小于第二阈值,且所述第一主色的饱和度小于第三阈值;所述多色灰阶类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于所述第一阈值,且在所述目标图像中的红绿蓝三通道值相同的颜色对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第二阈值;所述单色无彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度等于0。
15.根据权利要求14所述的终端,其特征在于:
所述更新模块,具体用于根据所述第一亮度调整值和所述第一饱和度调整值调整所述第一主色的亮度和饱和度以生成所述第一亮色辅色,根据所述第二亮度调整值和所述第二饱和度调整值调整所述第一主色的亮度和饱和度以生成所述第一暗色辅色;
或者,
所述更新模块,具体用于根据所述第一亮度调整值调整所述第一主色的亮度以生成所述第一亮色辅色,根据所述第二亮度调整值调整所述第一主色的亮度以生成所述第一暗色辅色。
16.根据权利要求15所述的终端,其特征在于:
所述更新模块,具体用于判断所述第一主色的亮度区分参数与所述第一亮色辅色的亮度区分参数的比值是否大于第四阈值或小于所述第四阈值的倒数;在所述第一主色的亮度区分参数与所述第一亮色辅色的亮度区分参数的比值大于所述第四阈值或小于所述第四阈值的倒数时,确定所述第一亮色辅色为第一辅色;在所述第一主色的亮度区分参数与所述第一亮色辅色的亮度区分参数的比值小于所述第四阈值或大于所述第四阈值的倒数时,确定所述第一暗色辅色为第一辅色;所述第一亮色辅色的亮度区分参数高于所述第一暗色辅色的亮度区分参数,所述第一主色的亮度区分参数为根据所述第一主色的红绿蓝三通道值计算得到的,所述第一亮色辅色的亮度区分参数为根据所述第一亮色辅色的红绿蓝三通道值计算得到的,所述第一暗色辅色的亮度区分参数为根据所述第一暗色辅色的红绿蓝三通道值计算得到的。
17.根据权利要求12所述的终端,其特征在于:
所述更新模块,具体用于获取所述目标图像中的每种颜色;按照预设排列顺序对所述目标图像中的每种颜色进行排序得到颜色队列,所述预设排列顺序为预先生成的颜色的排列顺序;根据预设分组法和所述目标图像中的每种颜色的像素点数量将所述颜色队列拆分成多个颜色组,所述多个颜色组中的每个颜色组均包括至少一种颜色;确定所述多个颜色组中像素点数量最多的目标颜色组;根据所述目标颜色组中的所有颜色生成第一主色。
18.根据权利要求17所述的终端,其特征在于:
所述更新模块,具体用于获取所述目标颜色组中的每种颜色的红绿蓝三通道值,所述红绿蓝三通道值包括红色通道值、绿色通道值和蓝色通道值;根据所述目标颜色组中的每种颜色的所述红色通道值和所述目标颜色组中的每种颜色的像素点数量在所述目标颜色组中所占比例,计算目标红色通道值;根据所述目标颜色组中的每种颜色的所述绿色通道值和所述目标颜色组中的每种颜色的像素点数量在所述目标颜色组中所占比例,计算目标绿色通道值;根据所述目标颜色组中的每种颜色的所述蓝色通道值和所述目标颜色组中的每种颜色的像素点数量在所述目标颜色组中所占比例,计算目标蓝色通道值;将所述目标红色通道值、所述目标绿色通道值和所述目标蓝色通道值组成目标红绿蓝三通道值以得到第一主色。
19.根据权利要求17所述的终端,其特征在于:
所述更新模块,还用于在所述目标图像的色彩类型为多色类型时,确定所述多个颜色组中像素点数量第二多的指定颜色组,根据所述指定颜色组中的所有颜色生成第二主色;所述多色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例小于第一阈值;
或者,
所述更新模块,还用于在所述目标图像的色彩类型为单色彩色类型时,获取所述单色彩色类型对应的第二主色调整值,根据所述第二主色调整值配置所述第一主色的色相以生成第二主色;所述单色彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度大于0;
或者,
所述更新模块,还用于在所述目标图像的色彩类型为单色无彩色类型时,获取所述单色无彩色类型对应的第二主色调整值,并根据所述第二主色调整值配置所述第一主色的亮度以生成第二主色;所述单色无彩色类型用于指示所述第一主色在所述目标图像中对应的像素点数量与所述目标图像对应的像素点数量的比例大于所述第一阈值,且所述第一主色的饱和度等于0。
20.根据权利要求19所述的终端,其特征在于:
所述更新模块,还用于获取所述目标图像的色彩类型对应的主色调整参数,所述主色调整参数包括亮度和饱和度中的至少一个;根据所述主色调整参数对所述第二主色进行调整以生成第二亮色辅色和第二暗色辅色;确定所述第二亮色辅色或所述第二暗色辅色为第二辅色,所述第二辅色为跟所述第二主色的色相接近但又具有饱和度或者亮度差异的颜色;在接收到将所述第二辅色设置为所述前景元素的颜色的指令时,设置所述第二辅色为所述前景元素的颜色;设置所述第二主色为背景图层的颜色,所述背景图层为透明度不变的图层或透明度渐变的图层,所述背景元素还包括所述背景图层,所述背景图层位于所述目标图像与所述前景元素之间。
21.根据权利要求12至18任意一项所述的终端,其特征在于:
所述更新模块,还用于设置所述第一主色为所述背景图层的颜色,所述背景图层为透明度不变的图层或透明度渐变的图层。
22.根据权利要求12至18任意一项所述的终端,其特征在于:
所述更新模块,还用于在所述目标图像一侧或多侧延伸出图像区域,其中,所述图像区域由所述第一主色构成;将所述图像区域和所述目标图像作为更新后的目标图像。
23.一种终端,其特征在于,包括一个或多个处理器以及存储器;
其中,所述一个或多个处理器用于读取存储在所述存储器中的软件代码并执行如所述权利要求1-11任一所述的方法。
24.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有软件代码,所述软件代码为在被一个或多个处理器读取后能够执行如所述权利要求1-11任一所述的方法的代码。
Priority Applications (4)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810982547.4A CN110865856B (zh) | 2018-08-27 | 2018-08-27 | 一种界面元素颜色显示方法及装置 |
PCT/CN2019/101937 WO2020042997A1 (zh) | 2018-08-27 | 2019-08-22 | 一种界面元素颜色显示方法及装置 |
US17/187,257 US11423590B2 (en) | 2018-08-27 | 2021-02-26 | Interface element color display method and apparatus |
US17/879,550 US11663754B2 (en) | 2018-08-27 | 2022-08-02 | Interface element color display method and apparatus |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810982547.4A CN110865856B (zh) | 2018-08-27 | 2018-08-27 | 一种界面元素颜色显示方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110865856A true CN110865856A (zh) | 2020-03-06 |
CN110865856B CN110865856B (zh) | 2022-04-22 |
Family
ID=69643945
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810982547.4A Active CN110865856B (zh) | 2018-08-27 | 2018-08-27 | 一种界面元素颜色显示方法及装置 |
Country Status (3)
Country | Link |
---|---|
US (2) | US11423590B2 (zh) |
CN (1) | CN110865856B (zh) |
WO (1) | WO2020042997A1 (zh) |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111506287A (zh) * | 2020-04-08 | 2020-08-07 | 北京百度网讯科技有限公司 | 页面显示方法和装置、电子设备和存储介质 |
CN111984164A (zh) * | 2020-08-31 | 2020-11-24 | Oppo广东移动通信有限公司 | 壁纸生成方法、装置、终端及存储介质 |
CN114038370A (zh) * | 2021-11-05 | 2022-02-11 | 深圳Tcl新技术有限公司 | 显示参数调整方法、装置、存储介质及显示设备 |
CN115861055A (zh) * | 2022-11-24 | 2023-03-28 | 湖北帅锐服装贸易有限公司 | 基于图像识别处理技术的服装设计版面拼接分析方法 |
CN116229188A (zh) * | 2023-05-08 | 2023-06-06 | 腾讯科技(深圳)有限公司 | 图像处理显示方法、分类模型的生成方法及其设备 |
CN116466952A (zh) * | 2023-06-19 | 2023-07-21 | 成都赛力斯科技有限公司 | 控件视觉效果元素调节方法、装置、电子设备及存储介质 |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110865856B (zh) * | 2018-08-27 | 2022-04-22 | 华为技术有限公司 | 一种界面元素颜色显示方法及装置 |
CN113961112A (zh) * | 2021-10-22 | 2022-01-21 | 维沃移动通信有限公司 | 图标显示方法、装置及电子设备 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110194129A1 (en) * | 2010-02-10 | 2011-08-11 | Michiko Fujiwara | Image processing device, image forming apparatus, and image processing method |
US8264499B1 (en) * | 2009-06-02 | 2012-09-11 | Sprint Communications Company L.P. | Enhancing viewability of information presented on a mobile device |
CN106095447A (zh) * | 2016-06-14 | 2016-11-09 | 武汉深之度科技有限公司 | 一种应用界面的生成方法、设备及计算设备 |
CN106775747A (zh) * | 2016-12-28 | 2017-05-31 | Tcl集团股份有限公司 | 一种颜色配置的方法和装置 |
CN107479781A (zh) * | 2017-07-20 | 2017-12-15 | 努比亚技术有限公司 | 一种应用图标颜色的更新方法及终端 |
CN107527374A (zh) * | 2017-08-18 | 2017-12-29 | 珠海市君天电子科技有限公司 | 一种文字显示的方法及设备 |
CN108170431A (zh) * | 2017-12-27 | 2018-06-15 | 深圳豪客互联网有限公司 | 一种导航标签窗口颜色设置方法及装置 |
CN108446705A (zh) * | 2017-02-16 | 2018-08-24 | 华为技术有限公司 | 图像处理的方法和设备 |
Family Cites Families (33)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP0963111A1 (en) * | 1998-06-02 | 1999-12-08 | Deutsche Thomson-Brandt Gmbh | Method and apparatus for dynamic contrast improvement in video pictures |
AU4747800A (en) * | 2000-04-14 | 2001-10-30 | Orlean Holding N.V. | An improved system and method for digitally editing a composite image |
US7130461B2 (en) * | 2002-12-18 | 2006-10-31 | Xerox Corporation | Systems and method for automatically choosing visual characteristics to highlight a target against a background |
US7613363B2 (en) * | 2005-06-23 | 2009-11-03 | Microsoft Corp. | Image superresolution through edge extraction and contrast enhancement |
US20070067269A1 (en) * | 2005-09-22 | 2007-03-22 | Xerox Corporation | User Interface |
JP5015540B2 (ja) * | 2006-09-28 | 2012-08-29 | 富士通株式会社 | 電子透かし埋め込み装置および検出装置 |
US8175409B1 (en) * | 2006-12-01 | 2012-05-08 | Adobe Systems Incorporated | Coherent image selection and modification |
US20090119678A1 (en) * | 2007-11-02 | 2009-05-07 | Jimmy Shih | Systems and methods for supporting downloadable applications on a portable client device |
US8577118B2 (en) * | 2008-01-18 | 2013-11-05 | Mitek Systems | Systems for mobile image capture and remittance processing |
US9690599B2 (en) * | 2009-07-09 | 2017-06-27 | Nokia Technologies Oy | Method and apparatus for determining an active input area |
US20130222329A1 (en) * | 2012-02-29 | 2013-08-29 | Lars-Johan Olof LARSBY | Graphical user interface interaction on a touch-sensitive device |
WO2013178725A1 (en) * | 2012-05-31 | 2013-12-05 | Thomson Licensing | Segmentation of a foreground object in a 3d scene |
US8897552B2 (en) * | 2012-08-01 | 2014-11-25 | Microsoft Corporation | Setting an operating-system color using a photograph |
US9129100B2 (en) * | 2012-12-13 | 2015-09-08 | Huawei Technologies Co., Ltd. | Verification code generation and verification method and apparatus |
US9542907B2 (en) * | 2013-06-09 | 2017-01-10 | Apple Inc. | Content adjustment in graphical user interface based on background content |
GB2518589B (en) * | 2013-07-30 | 2019-12-11 | Holition Ltd | Image processing |
CN104679380A (zh) * | 2013-11-30 | 2015-06-03 | 富泰华工业(深圳)有限公司 | 用户界面背景色调整系统及其方法 |
KR102161159B1 (ko) * | 2014-02-13 | 2020-09-29 | 삼성전자주식회사 | 전자 장치 및 전자 장치에서 색상 추출 방법 |
CN105590312B (zh) * | 2014-11-12 | 2018-05-18 | 株式会社理光 | 前景图像分割方法和装置 |
CN105719243B (zh) * | 2014-12-04 | 2018-09-07 | 富士通株式会社 | 图像处理装置和方法 |
US10388047B2 (en) * | 2015-02-20 | 2019-08-20 | Adobe Inc. | Providing visualizations of characteristics of an image |
KR102516172B1 (ko) * | 2015-09-21 | 2023-03-30 | 한화비전 주식회사 | 전경의 색상 추출 시스템, 방법 및 컴퓨터 판독 가능한 기록매체 |
CN105912321A (zh) * | 2016-04-01 | 2016-08-31 | 乐视控股(北京)有限公司 | 一种文字颜色设置方法及装置 |
JP6794858B2 (ja) * | 2017-02-06 | 2020-12-02 | コニカミノルタ株式会社 | 画像処理装置及び画像処理方法 |
US10380723B2 (en) * | 2017-06-19 | 2019-08-13 | Adobe Inc. | Editing dynamically selected portions of target images in a mask-based editing interface |
TWI689892B (zh) * | 2018-05-18 | 2020-04-01 | 瑞昱半導體股份有限公司 | 基於前景影像的背景虛化方法與電子裝置 |
CN109240572B (zh) * | 2018-07-20 | 2021-01-05 | 华为技术有限公司 | 一种获取图片的方法、对图片进行处理的方法及装置 |
US11107258B2 (en) * | 2018-07-20 | 2021-08-31 | Microsoft Technology Licensing, Llc. | Providing a dark viewing mode while preserving formatting |
CN110865856B (zh) * | 2018-08-27 | 2022-04-22 | 华为技术有限公司 | 一种界面元素颜色显示方法及装置 |
CN109816743A (zh) * | 2018-12-19 | 2019-05-28 | 华为技术有限公司 | 生成标识图案的方法和终端设备 |
US10964023B1 (en) * | 2019-03-26 | 2021-03-30 | Snap Inc. | Image segmentation system |
US11494953B2 (en) * | 2019-07-01 | 2022-11-08 | Microsoft Technology Licensing, Llc | Adaptive user interface palette for augmented reality |
WO2021050813A1 (en) * | 2019-09-12 | 2021-03-18 | Ppg Industries Ohio, Inc. | Dynamic generation of custom color selections |
-
2018
- 2018-08-27 CN CN201810982547.4A patent/CN110865856B/zh active Active
-
2019
- 2019-08-22 WO PCT/CN2019/101937 patent/WO2020042997A1/zh active Application Filing
-
2021
- 2021-02-26 US US17/187,257 patent/US11423590B2/en active Active
-
2022
- 2022-08-02 US US17/879,550 patent/US11663754B2/en active Active
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8264499B1 (en) * | 2009-06-02 | 2012-09-11 | Sprint Communications Company L.P. | Enhancing viewability of information presented on a mobile device |
US20110194129A1 (en) * | 2010-02-10 | 2011-08-11 | Michiko Fujiwara | Image processing device, image forming apparatus, and image processing method |
CN106095447A (zh) * | 2016-06-14 | 2016-11-09 | 武汉深之度科技有限公司 | 一种应用界面的生成方法、设备及计算设备 |
CN106775747A (zh) * | 2016-12-28 | 2017-05-31 | Tcl集团股份有限公司 | 一种颜色配置的方法和装置 |
CN108446705A (zh) * | 2017-02-16 | 2018-08-24 | 华为技术有限公司 | 图像处理的方法和设备 |
CN107479781A (zh) * | 2017-07-20 | 2017-12-15 | 努比亚技术有限公司 | 一种应用图标颜色的更新方法及终端 |
CN107527374A (zh) * | 2017-08-18 | 2017-12-29 | 珠海市君天电子科技有限公司 | 一种文字显示的方法及设备 |
CN108170431A (zh) * | 2017-12-27 | 2018-06-15 | 深圳豪客互联网有限公司 | 一种导航标签窗口颜色设置方法及装置 |
Cited By (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2021203720A1 (zh) * | 2020-04-08 | 2021-10-14 | 北京百度网讯科技有限公司 | 页面显示方法和装置、电子设备和存储介质 |
JP2022547931A (ja) * | 2020-04-08 | 2022-11-16 | ベイジン バイドゥ ネットコム サイエンス テクノロジー カンパニー リミテッド | ページ表示方法と装置、電子機器及び記憶媒体 |
EP3913477A4 (en) * | 2020-04-08 | 2023-01-25 | Beijing Baidu Netcom Science Technology Co., Ltd. | PAGE DISPLAY METHOD AND DEVICE, ELECTRONIC DEVICE AND STORAGE MEDIA |
CN111506287A (zh) * | 2020-04-08 | 2020-08-07 | 北京百度网讯科技有限公司 | 页面显示方法和装置、电子设备和存储介质 |
US11830224B2 (en) | 2020-04-08 | 2023-11-28 | Beijing Baidu Netcom Science Technology Co., Ltd. | Page displaying method and apparatus, electronic device and storage medium |
CN111984164A (zh) * | 2020-08-31 | 2020-11-24 | Oppo广东移动通信有限公司 | 壁纸生成方法、装置、终端及存储介质 |
CN114038370B (zh) * | 2021-11-05 | 2023-10-13 | 深圳Tcl新技术有限公司 | 显示参数调整方法、装置、存储介质及显示设备 |
CN114038370A (zh) * | 2021-11-05 | 2022-02-11 | 深圳Tcl新技术有限公司 | 显示参数调整方法、装置、存储介质及显示设备 |
CN115861055A (zh) * | 2022-11-24 | 2023-03-28 | 湖北帅锐服装贸易有限公司 | 基于图像识别处理技术的服装设计版面拼接分析方法 |
CN115861055B (zh) * | 2022-11-24 | 2023-12-01 | 武汉所见科技有限公司 | 基于图像识别处理技术的服装设计版面拼接分析方法 |
CN116229188B (zh) * | 2023-05-08 | 2023-07-25 | 腾讯科技(深圳)有限公司 | 图像处理显示方法、分类模型的生成方法及其设备 |
CN116229188A (zh) * | 2023-05-08 | 2023-06-06 | 腾讯科技(深圳)有限公司 | 图像处理显示方法、分类模型的生成方法及其设备 |
CN116466952B (zh) * | 2023-06-19 | 2023-09-01 | 成都赛力斯科技有限公司 | 控件视觉效果元素调节方法、装置、电子设备及存储介质 |
CN116466952A (zh) * | 2023-06-19 | 2023-07-21 | 成都赛力斯科技有限公司 | 控件视觉效果元素调节方法、装置、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
US11423590B2 (en) | 2022-08-23 |
US20220375139A1 (en) | 2022-11-24 |
US11663754B2 (en) | 2023-05-30 |
US20210209815A1 (en) | 2021-07-08 |
WO2020042997A1 (zh) | 2020-03-05 |
CN110865856B (zh) | 2022-04-22 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110865856B (zh) | 一种界面元素颜色显示方法及装置 | |
RU2693303C2 (ru) | Способ и устройство для изменения цвета фона панели инструментов согласно доминирующему цвету изображения | |
CN104076928B (zh) | 一种调整文字显示区域色调的方法 | |
CN108701351B (zh) | 一种图像显示增强方法及装置 | |
US10067646B2 (en) | Color selector for desktop publishing | |
CN110009712B (zh) | 一种图文排版方法及其相关装置 | |
CN109859283B (zh) | 一种取色方法、取色装置、电子设备和可存储介质 | |
CN112395030A (zh) | 一种页面处理方法、装置、电子设置以及存储介质 | |
CN111080806A (zh) | 贴图处理方法及装置、电子设备、存储介质 | |
US8988452B2 (en) | Color enhancement via gamut expansion | |
CN111090368A (zh) | 一种确定页面文字的配色方法和装置 | |
EP2711817A2 (en) | Theme display method and device thereof | |
CN112541955A (zh) | 图像处理方法、装置及设备 | |
US10679383B2 (en) | Interface color branding | |
CN114512094B (zh) | 屏幕色彩调节方法、装置、终端及计算机可读存储介质 | |
ES2397816T3 (es) | Método para captura de color en datos de imagen para utilización en una interfaz de usuario gráfica | |
CN114707013A (zh) | 图像配色方法与装置、终端及可读存储介质 | |
JP2022535155A (ja) | 改良型カラーホイールインターフェース | |
CN104090764B (zh) | 一种终端 | |
JP6577766B2 (ja) | 画像処理装置 | |
US11830107B2 (en) | Method and apparatus for filtering image colors, electronic device and storage medium | |
CN112328345B (zh) | 用于确定主题色的方法、装置、电子设备及可读存储介质 | |
US11948530B2 (en) | Computer-implemented method for generating gradient color value array, apparatus, and computer-program product thereof | |
JP4552532B2 (ja) | 映像表示装置、プログラムおよび色調整方法 | |
CN112569597A (zh) | 一种模型颜色变换的方法和电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |