CN113763500A - Web页面中的HSB取色处理方法、装置、设备及存储介质 - Google Patents
Web页面中的HSB取色处理方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN113763500A CN113763500A CN202111044541.0A CN202111044541A CN113763500A CN 113763500 A CN113763500 A CN 113763500A CN 202111044541 A CN202111044541 A CN 202111044541A CN 113763500 A CN113763500 A CN 113763500A
- Authority
- CN
- China
- Prior art keywords
- color
- division
- web page
- division node
- hsb
- 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.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title claims description 19
- 238000012545 processing Methods 0.000 claims abstract description 37
- 238000000605 extraction Methods 0.000 claims abstract description 35
- 238000000034 method Methods 0.000 claims abstract description 26
- 238000001228 spectrum Methods 0.000 claims description 39
- 230000006870 function Effects 0.000 claims description 37
- 238000006243 chemical reaction Methods 0.000 claims description 35
- 230000001960 triggered effect Effects 0.000 claims description 31
- 239000003086 colorant Substances 0.000 claims description 22
- 238000005192 partition Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 17
- 238000012986 modification Methods 0.000 claims description 13
- 230000004048 modification Effects 0.000 claims description 13
- 238000012790 confirmation Methods 0.000 claims description 9
- 230000002452 interceptive effect Effects 0.000 claims description 2
- 238000012827 research and development Methods 0.000 abstract description 2
- 238000005516 engineering process Methods 0.000 description 14
- 230000008569 process Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 238000004088 simulation Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000007704 transition Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- 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/40—Filling a planar surface by adding surface attributes, e.g. colour or texture
-
- 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
本发明涉及研发管理技术领域，揭露了一种Web页面中的HSB取色处理方法、装置、设备及存储介质。所述方法包括：在Web页面绘制包含第一划分节点的色谱条框，将第一划分节点的颜色遍历修改为与第一RGB颜色参数对应的颜色；在Web页面绘制包含第二划分节点的色域框，将第二划分节点的颜色遍历修改为第二RGB颜色参数；在接收到onclick事件时，对被点击的第一划分节点对应的第一RGB颜色参数和第二划分节点对应的第二RGB颜色参数进行交互修改之后，或对被点击的第二划分节点对应的第一RGB颜色参数和第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对Web页面的中的HSB颜色参数的取色处理完成。本发明能解决当前使游览器不能支持线性渐变属性的问题。
Description
技术领域
本发明涉及研发管理技术领域，尤其揭露了一种Web页面中的HSB取色处理方法、装置、设备及存储介质。
背景技术
目前，Web-HSB取色器是Web网页中的一种较为基础且常见的功能，其在聊天消息、富文本、管理系统的主题配置中等都有涉及；同时，对于一个Web网页站点来说，丰富可自定义设置的字体颜色、背景颜色也是不可缺少的，且Web网页中也需要在不同的主题页面设置不同的主题色，对于文章里重点内容也需要进行不同标色。
现有技术中，主要使用的是只能选取固定几种颜色的简单的Web-HSB取色器，满足不了市场的颜色调整需求；而部分Web网页中使用了基于HSB原理的全颜色Web-HSB取色器；Web-HSB取色器通过色相、饱和度、亮度三种数值的变化实现控制颜色选取，但目前的Web-HSB取色器，大多是基于CSS3技术中的线性渐变(Linear Gradients)属性实现色域的渲染，而CSS2技术中并不支持线性渐变属性，如此，导致使用CSS2技术的IE9以下浏览器或其它不支持CSS3的浏览器环境中无法使用Web-HSB取色器，可见，现有技术中的Web-HSB取色器存在兼容性较差的问题。因此本领域技术人员亟需寻找一种新的技术方案来解决上述的技术问题。
发明内容
基于此，有必要针对上述技术问题，提供一种Web页面中的HSB取色处理方法、装置、设备及存储介质，解决当前使用CSS2技术的游览器或不支持CSS3技术的游览器不能支持线性渐变属性的问题。
一种Web页面中的HSB取色处理方法，包括：
获取Web页面中的HSB颜色参数；
在所述Web页面绘制包含多个第一划分节点的色谱条框后，获取每个所述第一划分节点的第一RGB颜色参数，并将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色；所述第一RGB颜色参数是所述第一划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
在所述Web页面绘制包含多个第二划分节点的色域框后，获取每个所述第二划分节点的第二RGB颜色参数，并将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数；所述第二RGB颜色参数是所述第二划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成；或
在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成。
一种Web页面中的HSB取色处理装置，包括：
获取模块，用于获取Web页面中的HSB颜色参数；
第一修改模块，用于在所述Web页面绘制包含多个第一划分节点的色谱条框后，获取每个所述第一划分节点的第一RGB颜色参数，并将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色；所述第一RGB颜色参数是所述第一划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
第二修改模块，用于在所述Web页面绘制包含多个第二划分节点的色域框后，获取每个所述第二划分节点的第二RGB颜色参数，并将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数；所述第二RGB颜色参数是所述第二划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
第一确认模块，用于在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成；或
第二确认模块，用于在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成。
一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述一种Web页面中的HSB取色处理方法。
一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述一种Web页面中的HSB取色处理方法。
上述Web页面中的HSB取色处理方法、装置、设备及存储介质，通过一种新的Web-HSB取色器来进行Web页面的中的HSB颜色参数的取色处理，根据HSB颜色的原理，采用多个第一划分节点构成的色谱条框和第二划分节点构成的色域框中的背景色来模拟多像素点描绘颜色渐变的方式，解决当前使用CSS2技术的游览器或不支持CSS3技术的游览器不能支持线性渐变属性的问题，也即现有Web-HSB存在兼容性差的问题，进而实现Web页面中的各种渐变色域，同时由于每个第一划分节点对应第一RGB颜色参数，每个第二划分节点对应第二RGB颜色参数，在颜色调整过程中，存在较大范围的颜色调整范围，进而能解决当前固定几种颜色的简单的Web-HSB取色器满足不了颜色调整需求的问题；另外本发明不再区分于CSS2、CSS3的游览器环境，而是都能支持于CSS2、CSS3技术下的浏览器。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一实施例中一种Web页面中的HSB取色处理方法的一应用环境示意图；
图2是本发明一实施例中一种Web页面中的HSB取色处理方法的一流程图；
图3是本发明一实施例中一种Web页面中的HSB取色处理方法的色谱条框图和色域框图；
图4是本发明一实施例中一种Web页面中的HSB取色处理装置的结构示意图；
图5是本发明一实施例中计算机设备的一示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明提供的一种Web页面中的HSB取色处理方法，可应用在如图1的应用环境中，其中，客户端通过网络与服务器进行通信。其中，客户端可以包括但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。
在一实施例中，如图2所示，提供一种Web页面中的HSB取色处理方法，以该方法应用在图1中的服务器为例进行说明，包括如下步骤：
S10，获取Web页面中的HSB颜色参数；
可理解地，HSB颜色参数由H颜色参数、S颜色参数和B颜色参数组成，其中，H颜色参数为色相(hue)、S颜色参数为饱和度(saturation)、B颜色参数为亮度(brightness)，其中，HSB颜色参数是基于人的眼睛所设置的色彩参数；色相在0～360°的标准色轮上，色相是按位置度量的，且通常色相是由颜色名称标识的，比如红、绿或橙色、黑色和白色无色相，饱和度表示色彩的纯度，为0时为灰色。另外白、黑和其他灰色色彩都没有饱和度的，另外饱和度的取值范为围0～100％，亮度表示色彩的明亮度，为0时即为黑色。最大亮度是色彩最鲜明的状态，另外亮度的取值范围也为0～100％；另外对于一个Web网页来说，存在初始的HSB颜色参数，该初始的HSB颜色参数用于进行转换成RGB颜色参数，如hue＝0，saturation＝0,brightness＝1，转换成的RGB颜色参数为(255,255,255)，颜色即白色。
S20，在所述Web页面绘制包含多个第一划分节点的色谱条框后，获取每个所述第一划分节点的第一RGB颜色参数，并将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色；所述第一RGB颜色参数是所述第一划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
可理解地，色谱条框的形状可为矩形；第一划分节点为第一DIV节点，第一DIV节点也可称为DIV元素，DIV元素定义HTML文档中的分隔(DIVision)；具体地，先通过HTML中的DIV元素在Web页面中划分出一个目标区域并将其作为色谱条框，再通过第一划分节点将目标区域划分成多个目标小区域，其中，每个目标小区域也是通过两个第一划分节点划分而成，在色谱条框中，每个第一划分节点对应一个位置百分比(position)，最后将色谱条框中所有的第一划分节点对应的HSB颜色参数通过颜色转换函数hsb2rgb(position*360,saturation,brightness)转换为第一RGB颜色参数；本实施例实施转换的原因为Web页面中无法直接识别到RGB颜色参数。
S30，在所述Web页面绘制包含多个第二划分节点的色域框后，获取每个所述第二划分节点的第二RGB颜色参数，并将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数；所述第二RGB颜色参数是所述第二划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
可理解地，色域框的形状可为正方形；第二划分节点也为第二DIV节点，第二DIV节点也可称为DIV元素，与色谱条框的区别在于，本实施例是对色域框中的目标区域进行划分，其中，在色域框中，每一个第二划分节点分别对应一个X轴百分比和一个Y轴百分比；本实施例实施转换的原因为Web页面中无法直接识别到RGB颜色参数。
另外在一实施例中，通过控制所述色谱条框中的第一DIV节点和所述色域框中的第二DIV节点的数量，以提高色谱条框和色域框被点击后取色的性能和提高谱条框和色域框的分辨率。
S40，在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成；或
S50，在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成。
可理解地，步骤S40至S50所对应的实施例是色谱条框(如图3所示)中的色谱条与色域框(如图3所示)中的色域进行交互的情况，也即使用Web-HSB取色器进行颜色调整的过程；通过在色谱条框中设置第一透明遮罩和在色域框中设置第二透明遮罩，在识别到第一透明遮罩或第二透明遮罩被点击到时，识别被点击的位置，通过被点击的位置确定出被点击的第一划分节点或第二划分节点(在被点击的位置中标记出DIV元素)，通过被点击的第一划分节点确定出与其对应的第一RGB颜色参数，再通过第一RGB颜色参数修改第二划分节点对应的第二RGB颜色参数，或者通过被点击的第二划分节点确定出与其对应的第二RGB颜色参数，再通过第二RGB颜色参数修改第一划分节点对应的第一RGB颜色参数，以完成色谱条框与色域框中的交互，根据色谱条框重新绘制色域或根据色域重新绘制色谱条框。
在步骤S10至步骤S50所在的实施例中，提出了一种新的Web-HSB取色器来进行Web页面的中的HSB颜色参数的取色处理，根据HSB颜色的原理，采用如本发明提到的多个第一划分节点和第二划分节点的背景色来模拟多像素点描绘颜色渐变的方式(本发明实现颜色渐变的具体原理为：CSS3的线性渐变属性是通过色域DIV元素直接生成；CSS2的线性渐变属性是为每一个DIV元素设置颜色，进而实现在色谱条框和色域框上进行背景色模拟，假设CSS3有DIV元素构成的长方形，其颜色是从黑到白的颜色线性渐变，此时CSS2要实现颜色线性渐变，需将上述长方形进行拆分，若先将长方形拆分成三个长方形，颜色分别为黑、灰和白，其中，拆分出的长方形越多，其实现的颜色过度效果越自然)，进而解决当前使用CSS2技术的游览器或不支持CSS3技术的游览器不能支持线性渐变属性的问题，也即现有Web-HSB取色器存在兼容性差的问题，进而实现Web页面中的各种渐变色域；同时由于每个第一划分节点对应第一RGB颜色参数，每个第二划分节点对应第二RGB颜色参数，在颜色调整过程中，存在较大范围的颜色调整范围，进而能解决当前固定几种颜色的简单的Web-HSB取色器满足不了颜色调整需求的问题；另外本发明不再区分于CSS2、CSS3的游览器环境，而是都能支持于CSS2、CSS3技术下的浏览器。
进一步地，所述获取每个所述第一划分节点的第一RGB颜色参数，包括：
获取所述色谱条框中各个所述第一划分节点的位置坐标；
根据各所述位置坐标计算出每个所述第一划分节点在所述色谱条框中的位置坐标百分比；
根据所述位置坐标百分比以及所述颜色转换函数hsb2rgb获取与各个所述第一划分节点分别对应的第一RGB颜色参数。
可理解地，色谱条框可被认为成一个Y坐标轴，该Y坐标轴已被预先设置好位置坐标，即可得到色谱条框中的每一个第一划分节点的坐标位置，同时每个位置坐标在色谱条框中已被预先设置好对应的位置坐标百分比(position)，即在获取到第一划分节点的位置坐标后，则可通过位置坐标确定出位置坐标百分比(如Y坐的轴位置坐标为0到1，将位置坐标进行百分比转换后，0代表的位置坐标百分比为百分之零,1代表的位置坐标百分比为百分之一百)，最后通过执行颜色转换函数hsb2rgb(position*360,saturation,brightness)运算位置坐标百分比，得到各个第一划分节点对应的第一RGB颜色参数(位置坐标百分比与position*360进行运算后，得到的色相值为0°
～360°，其中，0°对应百分之零，也即对应位置坐标0,360°对应百分之一百，也即对应位置坐标1)。
进一步地，所述获取每个所述第二划分节点的第二RGB颜色参数，包括：
获取所述色域框中包含各个所述第二划分节点的行列数；
根据各所述行列数计算出每个所述第一划分节点在所述色域框中的X轴百分比和Y轴百分比；
根据所述X轴百分比和Y轴百分比以及所述颜色转换函数hsb2rgb获取与各个所述第二划分节点分别对应的第二RGB颜色参数。
可理解地，色域框的形状为正方形，行列数是相等的，也即每行与每行的第二DIV几点的数量也是相等的，因此色域框中的每一行和每一列下的第二划分节点都可被换分出X轴百分比和Y轴百分比，最后通过执行颜色转换函数hsb2rgb(hue,x*100,y*100)运算X轴百分比和Y轴百分比，得到各个第二划分节点分别对应的第二RGB颜色参数。
进一步地，所述将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色，包括：
通过循环语句遍历所有所述第一划分节点，以将各所述第一划分节点的颜色属性遍历设置为与所述第一RGB颜色参数对应的颜色。
可理解地，遍历使用的是JavaScript语言中的循环遍历，循环遍历所对应的语句可以为for循环语句，其目的是为了将颜色转换函数hsb2rgb转换得到的第一RGB颜色设置给第一划分节点(DIV元素)，也即与第一划分节点对应的颜色属性，包括value和css属性中的background-color，举例说明，若位置坐标为1，颜色转换函数得到的色相值为360°，假设360°代表的是红色，此时，第一个划分节点对应的background-color(背景颜色)为红色和value为360°，当点击与位置坐标对应的第一划分节点后，得色相值为360°。
在另一实施例中，所述将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数，包括：通过循环语句遍历所有所述第二划分节点，以将各所述第二划分节点的颜色属性遍历设置为与所述第二RGB颜色参数对应的颜色。
进一步地，所述接收到用户对所述Web页面中任意的所述第一划分节点或接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件之前，还包括：
对所述Web页面中的色谱条框的第一划分节点的层叠样式表属性进行设置后，生成漂浮在所述色谱条框上的第一透明遮罩；所述第一划分节点的onclick事件通过点击所述第一透明遮罩上与所述第一划分节点对应的位置触发；
对所述Web页面中的色域框的第二划分节点的层叠样式表属性进行设置后，生成漂浮在所述色域框上的第二透明遮罩；所述第二划分节点的onclick事件通过点击所述第二透明遮罩上与所述第二划分节点对应的位置触发。
可理解地，本实施例为预先在色谱条框和色域框中分别设置第一透明遮罩和第二透明遮罩的过程，通过设置的透明遮罩可是被别出用户点击到的第一划分节点或第二划分节点；具体通过HTML中的DIV元素设置CSS属性中的zindex，以使色谱条框漂浮第一透明遮罩，色域框漂浮第二透明遮罩。
进一步地，所述HSB颜色参数包括H颜色参数、S颜色参数和B颜色参数；所述在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改，包括：
接收onclick事件，若确认所述onclick事件为点击所述第一透明遮罩上与所述第一划分节点对应的位置触发，则获取所述色谱条框中与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数；
将获取的所述H颜色参数通过所述颜色转换函数转换为第三RGB颜色参数；
通过所述第三RGB颜色参数修改与所有的所述第二划分节点对应的第二RGB颜色参数，以在所述色域框中重新绘制出色域。
可理解地，onclick事件是JavaScript中的onclick事件；本实施例表明点击色谱条框中的第一划分节点只会改变H颜色参数，如一开始点击色谱条框使色相值为10或者色谱条框中的初始的色相值为10，此时色域框中的HSB颜色参数为(10,0,0)至(10,1,1)，再次触发onclick事件后，也即悬浮第一透明遮罩上的色谱条框中的第一划分节点被点击后，色相值从10变成20，此时色域框的色域自然发生改变(色域框中的所有的第二划分节点对应的第二RGB颜色参数修改成第三RGB颜色参数，也即色域框中重新绘制出色域)，变成(20,0,0)只(20,1,1).
进一步地，所述在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改，包括：
接收onclick事件，若确认所述onclick事件为点击所述第二透明遮罩上与所述第二划分节点对应的位置触发，则获取所述色域框中与被点击的所述第二划分节点对应的HSB参数的S颜色参数和B颜色参数；
将所述色域框中所述第二划分节点对应的S和B颜色参数通过所述颜色转换函数转换为第四RGB颜色参数；
通过所述第四RGB颜色参数修改与所有所述第一划分节点对应的第一RGB颜色参数，以在所述色谱条框中重新绘制出色谱条。
可理解地，onclick事件是JavaScript中的onclick事件；本实施例表明点击色域框中的第二DIV节电只会改变S颜色参数和B颜色参数。
进一步地，所述获取所述色谱条框中与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数，包括：
获取所述第一划分节点在所述色谱条框中的位置坐标百分比；所述色谱条框中各个所述第一划分节点都对应一个所述位置坐标百分比；
将所述位置坐标百分比乘以360度之后，得到当前与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数。
可理解地，本实施例主要确定出色谱条框中第一划分节点被点击后所得到的H颜色参数。
进一步地，所述获取所述色域框中与被点击的所述第二划分节点对应的HSB参数的S颜色参数和B颜色参数，包括：
获取所述第二划分节点在所述色域框中的X轴百分比和Y轴百分比；所述色域框中的每一个所述第二划分节点均关联一个在X轴方向上的X轴百分比和一个在Y轴方向上的Y轴百分比；
将所述X轴百分比和所述Y轴百分比各自乘以百分之一百之后，分别得到当前与被点击的所述第二划分节点对应的HSB颜色参数的S颜色参数和B颜色参数。
可理解地，本实施例主要确定出色域框中第二划分节点被点击后所得到的S颜色参数和B颜色参数。
综上所述，上述提供了一种Web页面中的HSB取色处理方法，提出了一种新的Web-HSB取色器来进行Web页面的中的HSB颜色参数的取色处理，根据HSB颜色的原理，采用如本发明提到的多个第一划分节点和第二划分节点的背景色来模拟多像素点描绘颜色渐变的方式(本发明实现颜色渐变的具体原理为：CSS3的线性渐变属性是通过色域DIV元素直接生成；CSS2的线性渐变属性是为每一个DIV元素设置颜色，进而实现在色谱条框和色域框上进行背景色模拟，假设CSS3有DIV元素构成的长方形，其颜色是从黑到白的颜色线性渐变，此时CSS2要实现颜色线性渐变，需将上述长方形进行拆分，若先将长方形拆分成三个长方形，颜色分别为黑、灰和白，其中，拆分出的长方形越多，其实现的颜色过度效果越自然)，进而解决当前使用CSS2技术的游览器或不支持CSS3技术的游览器不能支持线性渐变属性的问题，也即现有Web-HSB取色器存在兼容性差的问题，进而实现Web页面中的各种渐变色域；同时由于每个第一划分节点对应第一RGB颜色参数，每个第二划分节点对应第二RGB颜色参数，在颜色调整过程中，存在较大范围的颜色调整范围，进而能解决当前固定几种颜色的简单的Web-HSB取色器满足不了颜色调整需求的问题；另外本发明不再区分于CSS2、CSS3的游览器环境，而是都能支持于CSS2、CSS3技术下的浏览器。
另外本发明通过控制第一划分节点和第二划分节点的数量，提高色谱条框和色域框被点击后取色的性能和提高谱条框和色域框的分辨率。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
在一实施例中，提供一种Web页面中的HSB取色处理装置，该一种Web页面中的HSB取色处理装置与上述实施例中一种Web页面中的HSB取色处理方法一一对应。如图4所示，该一种Web页面中的HSB取色处理装置包括获取模块11、第一修改模块12、第二修改模块13、第一确认模块14和第二确认模块15。各功能模块详细说明如下：
获取模块11，用于获取Web页面中的HSB颜色参数；
第一修改模块12，用于在所述Web页面绘制包含多个第一划分节点的色谱条框后，获取每个所述第一划分节点的第一RGB颜色参数，并将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色；所述第一RGB颜色参数是所述第一划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
第二修改模块13，用于在所述Web页面绘制包含多个第二划分节点的色域框后，获取每个所述第二划分节点的第二RGB颜色参数，并将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数；所述第二RGB颜色参数是所述第二划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
第一确认模块14，用于在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成；或
第二确认模块15，用于在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成。
进一步地，所述第一修改模块包括：
第一获取子模块，用于获取所述色谱条框中各个所述第一划分节点的位置坐标；
第一计算子模块，用于根据各所述位置坐标计算出每个所述第一划分节点在所述色谱条框中的位置坐标百分比；
第二获取子模块，用于根据所述位置坐标百分比以及所述颜色转换函数hsb2rgb获取与各个所述第一划分节点分别对应的第一RGB颜色参数。
进一步地，所述第二修改模块包括：
第三获取子模块，用于获取每个所述第二划分节点的第二RGB颜色参数，包括：
第四获取子模块，用于获取所述色域框中包含各个所述第二划分节点的行列数；
第二计算子模块，用于根据各所述行列数计算出每个所述第一划分节点在所述色域框中的X轴百分比和Y轴百分比；
第五获取子模块，用于根据所述X轴百分比和Y轴百分比以及所述颜色转换函数hsb2rgb获取与各个所述第二划分节点分别对应的第二RGB颜色参数。
进一步地，所述Web页面中的HSB取色处理装置还包括：
第一生成模块，用于对所述Web页面中的色谱条框的第一划分节点的层叠样式表属性进行设置后，生成漂浮在所述色谱条框上的第一透明遮罩；所述第一划分节点的onclick事件通过点击所述第一透明遮罩上与所述第一划分节点对应的位置触发；
第二生成模块，用于对所述Web页面中的色域框的第二划分节点的层叠样式表属性进行设置后，生成漂浮在所述色域框上的第二透明遮罩；所述第二划分节点的onclick事件通过点击所述第二透明遮罩上与所述第二划分节点对应的位置触发。
进一步地，所述第一确认模块包括：
第六获取子模块，用于接收onclick事件，若确认所述onclick事件为点击所述第一透明遮罩上与所述第一划分节点对应的位置触发，则获取所述色谱条框中与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数；
第一转换子模块，用于将获取的所述H颜色参数通过所述颜色转换函数转换为第三RGB颜色参数；
第一绘制子模块，用于通过所述第三RGB颜色参数修改与所有的所述第二划分节点对应的第二RGB颜色参数，以在所述色域框中重新绘制出色域。
进一步地，所述第二确认模块包括：
第七获取子模块，用于接收onclick事件，若确认所述onclick事件为点击所述第二透明遮罩上与所述第二划分节点对应的位置触发，则获取所述色域框中与被点击的所述第二划分节点对应的HSB参数的S颜色参数和B颜色参数；
第二转换子模块，用于将所述色域框中所述第二划分节点对应的S和B颜色参数通过所述颜色转换函数转换为第四RGB颜色参数；
第二绘制子模块，用于通过所述第四RGB颜色参数修改与所有所述第一划分节点对应的第一RGB颜色参数，以在所述色谱条框中重新绘制出色谱条。
进一步地，所述第六获取子模块包括：
获取单元，用于获取所述第一划分节点在所述色谱条框中的位置坐标百分比；所述色谱条框中各个所述第一划分节点都对应一个所述位置坐标百分比；
计算单元，用于将所述位置坐标百分比乘以360度之后，得到当前与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数。
关于一种Web页面中的HSB取色处理装置的具体限定可以参见上文中对于一种Web页面中的HSB取色处理方法的限定，在此不再赘述。上述一种Web页面中的HSB取色处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储一种Web页面中的HSB取色处理方法中涉及到的数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种Web页面中的HSB取色处理方法。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中一种Web页面中的HSB取色处理方法的步骤，例如图2所示的步骤S10至步骤S50。或者，处理器执行计算机程序时实现上述实施例中一种Web页面中的HSB取色处理装置的各模块/单元的功能，例如图4所示模块11至模块15的功能。为避免重复，这里不再赘述。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述实施例中一种Web页面中的HSB取色处理方法的步骤，例如图2所示的步骤S10至步骤S40。或者，计算机程序被处理器执行时实现上述实施例中一种Web页面中的HSB取色处理装置的各模块/单元的功能，例如图4所示模块11至模块15的功能。为避免重复，这里不再赘述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。
Claims (10)
1.一种Web页面中的HSB取色处理方法，其特征在于，包括：
获取Web页面中的HSB颜色参数；
在所述Web页面绘制包含多个第一划分节点的色谱条框后，获取每个所述第一划分节点的第一RGB颜色参数，并将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色；所述第一RGB颜色参数是所述第一划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
在所述Web页面绘制包含多个第二划分节点的色域框后，获取每个所述第二划分节点的第二RGB颜色参数，并将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数；所述第二RGB颜色参数是所述第二划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成；或
在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成。
2.根据权利要求1所述的Web页面中的HSB取色处理方法，其特征在于，所述获取每个所述第一划分节点的第一RGB颜色参数，包括：
获取所述色谱条框中各个所述第一划分节点的位置坐标；
根据各所述位置坐标计算出每个所述第一划分节点在所述色谱条框中的位置坐标百分比；
根据所述位置坐标百分比以及所述颜色转换函数hsb2rgb获取与各个所述第一划分节点分别对应的第一RGB颜色参数。
3.根据权利要求1所述的Web页面中的HSB取色处理方法，其特征在于，所述获取每个所述第二划分节点的第二RGB颜色参数，包括：
获取所述色域框中包含各个所述第二划分节点的行列数；
根据各所述行列数计算出每个所述第一划分节点在所述色域框中的X轴百分比和Y轴百分比；
根据所述X轴百分比和Y轴百分比以及所述颜色转换函数hsb2rgb获取与各个所述第二划分节点分别对应的第二RGB颜色参数。
4.根据权利要求1所述的Web页面中的HSB取色处理方法，其特征在于，所述接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件或接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件之前，还包括：
对所述Web页面中的色谱条框的第一划分节点的层叠样式表属性进行设置后，生成漂浮在所述色谱条框上的第一透明遮罩；所述第一划分节点的onclick事件通过点击所述第一透明遮罩上与所述第一划分节点对应的位置触发；
对所述Web页面中的色域框的第二划分节点的层叠样式表属性进行设置后，生成漂浮在所述色域框上的第二透明遮罩；所述第二划分节点的onclick事件通过点击所述第二透明遮罩上与所述第二划分节点对应的位置触发。
5.根据权利要求1所述的Web页面中的HSB取色处理方法，其特征在于，所述HSB颜色参数包括H颜色参数、S颜色参数和B颜色参数；所述在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改，包括：
接收onclick事件，若确认所述onclick事件为点击所述第一透明遮罩上与所述第一划分节点对应的位置触发，则获取所述色谱条框中与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数；
将获取的所述H颜色参数通过所述颜色转换函数转换为第三RGB颜色参数；
通过所述第三RGB颜色参数修改与所有的所述第二划分节点对应的第二RGB颜色参数，以在所述色域框中重新绘制出色域。
6.根据权利要求1所述的Web页面中的HSB取色处理方法，其特征在于，所述在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改，包括：
接收onclick事件，若确认所述onclick事件为点击所述第二透明遮罩上与所述第二划分节点对应的位置触发，则获取所述色域框中与被点击的所述第二划分节点对应的HSB参数的S颜色参数和B颜色参数；
将所述色域框中所述第二划分节点对应的S和B颜色参数通过所述颜色转换函数转换为第四RGB颜色参数；
通过所述第四RGB颜色参数修改与所有所述第一划分节点对应的第一RGB颜色参数，以在所述色谱条框中重新绘制出色谱条。
7.根据权利要求5所述的Web页面中的HSB取色处理方法，其特征在于，所述获取所述色谱条框中与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数，包括：
获取所述第一划分节点在所述色谱条框中的位置坐标百分比；所述色谱条框中各个所述第一划分节点都对应一个所述位置坐标百分比；
将所述位置坐标百分比乘以360度之后，得到当前与被点击的所述第一划分节点对应的HSB颜色参数的H颜色参数。
8.一种Web页面中的HSB取色处理装置，其特征在于，包括：
获取模块，用于获取Web页面中的HSB颜色参数；
第一修改模块，用于在所述Web页面绘制包含多个第一划分节点的色谱条框后，获取每个所述第一划分节点的第一RGB颜色参数，并将所有所述第一划分节点的颜色遍历修改为与所述第一RGB颜色参数对应的颜色；所述第一RGB颜色参数是所述第一划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
第二修改模块，用于在所述Web页面绘制包含多个第二划分节点的色域框后，获取每个所述第二划分节点的第二RGB颜色参数，并将所有所述第二划分节点的颜色遍历修改为所述第二RGB颜色参数；所述第二RGB颜色参数是所述第二划分节点的HSB颜色参数经过所述颜色转换函数进行转换处理后得到的；
第一确认模块，用于在接收到用户对所述Web页面中任意的所述第一划分节点进行点击后所触发的onclick事件时，对被点击的所述第一划分节点对应的第一RGB颜色参数和所述第二划分节点对应的第二RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成；或
第二确认模块，用于在接收到用户对所述Web页面中任意的所述第二划分节点进行点击后所触发的onclick事件时，对被点击的所述第二划分节点对应的第一RGB颜色参数和所述第一划分节点对应的第一RGB颜色参数进行交互修改之后，确认对所述Web页面的中的HSB颜色参数的取色处理完成。
9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述一种Web页面中的HSB取色处理方法。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述一种Web页面中的HSB取色处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111044541.0A CN113763500A (zh) | 2021-09-07 | 2021-09-07 | Web页面中的HSB取色处理方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111044541.0A CN113763500A (zh) | 2021-09-07 | 2021-09-07 | Web页面中的HSB取色处理方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113763500A true CN113763500A (zh) | 2021-12-07 |
Family
ID=78793542
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111044541.0A Pending CN113763500A (zh) | 2021-09-07 | 2021-09-07 | Web页面中的HSB取色处理方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113763500A (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2422542A1 (en) * | 2000-04-12 | 2001-10-25 | Carl Kupersmit | Method of searching and producing matching color information |
| CN1509565A (zh) * | 2001-03-15 | 2004-06-30 | 柯达保丽光印艺集团 | 用图像监督的web页颜色精确性 |
| CN109859283A (zh) * | 2018-12-22 | 2019-06-07 | Oppo广东移动通信有限公司 | 一种取色方法、取色装置、电子设备和可存储介质 |
| CN111209070A (zh) * | 2020-01-06 | 2020-05-29 | 杭州涂鸦信息技术有限公司 | Web端线性渐变色取色方法 |
| CN111897619A (zh) * | 2020-08-14 | 2020-11-06 | 百度时代网络技术（北京）有限公司 | 浏览器页面的显示方法、装置、电子设备及存储介质 |
| CN113207023A (zh) * | 2021-04-06 | 2021-08-03 | 深圳创维－Rgb电子有限公司 | 电视详情页背景变色处理方法、装置、设备及介质 |
-
2021
- 2021-09-07 CN CN202111044541.0A patent/CN113763500A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2422542A1 (en) * | 2000-04-12 | 2001-10-25 | Carl Kupersmit | Method of searching and producing matching color information |
| CN1509565A (zh) * | 2001-03-15 | 2004-06-30 | 柯达保丽光印艺集团 | 用图像监督的web页颜色精确性 |
| CN109859283A (zh) * | 2018-12-22 | 2019-06-07 | Oppo广东移动通信有限公司 | 一种取色方法、取色装置、电子设备和可存储介质 |
| CN111209070A (zh) * | 2020-01-06 | 2020-05-29 | 杭州涂鸦信息技术有限公司 | Web端线性渐变色取色方法 |
| CN111897619A (zh) * | 2020-08-14 | 2020-11-06 | 百度时代网络技术（北京）有限公司 | 浏览器页面的显示方法、装置、电子设备及存储介质 |
| CN113207023A (zh) * | 2021-04-06 | 2021-08-03 | 深圳创维－Rgb电子有限公司 | 电视详情页背景变色处理方法、装置、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111475163B (zh) | 视图模板的代码文件生成方法、装置、设备及存储介质 | |
| CN105786924B (zh) | 网页夜间模式处理方法、装置及移动终端 | |
| CN106095437B (zh) | 用户界面从右到左rtl的布局方式的实现方法及装置 | |
| CN110110258A (zh) | 一种文字转换的方法、装置以及电子设备 | |
| CN106648635B (zh) | 跨平台的公式编辑与渲染方法及系统 | |
| CN105094930A (zh) | 一种定位图片系统及方法 | |
| CN111694493B (zh) | 一种网页截图方法、计算机设备及可读存储介质 | |
| CN110888709A (zh) | 监控屏的智能操作方法、装置、计算机设备和存储介质 | |
| CN109933751A (zh) | 图文绘制方法、装置、计算机可读存储介质和计算机设备 | |
| CN111159597A (zh) | 骨架屏的生成方法、系统、计算机设备及存储介质 | |
| CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| CN112307720A (zh) | 基于psd文档的html设计模板自动转换方法和系统 | |
| CN105701165A (zh) | 浏览器模式切换方法及切换装置 | |
| CN111008290A (zh) | 电网地理沿布图显示方法、装置、计算机设备和存储介质 | |
| CN111291533A (zh) | 待显示句段的显示方法、装置、计算机设备和存储介质 | |
| CN114416069A (zh) | 应用开发平台、微程序生成方法、设备及存储介质 | |
| CN108984175A (zh) | 适用于移动设备的面向对象的电网svg单线图展示方法 | |
| CN110990431A (zh) | 一种实现中国地图和折线图数据同步联动轮播的方法 | |
| CN113778405A (zh) | 一种跨平台app构建方法、装置、系统及介质 | |
| CN113763500A (zh) | Web页面中的HSB取色处理方法、装置、设备及存储介质 | |
| CN105373565B (zh) | 网页处理方法及装置 | |
| CN113096217B (zh) | 图片生成方法、装置、电子设备以及存储介质 | |
| US20190156537A1 (en) | Method of digital design generation | |
| CN107025111A (zh) | 一种浏览器目标页面整屏切换显示的方法及系统 | |
| CN109828985B (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 |