取色方法、装置、电子设备和存储介质与流程

1.本发明涉及图像处理技术领域，尤其涉及一种取色方法、装置、电子设备和存储介质。


背景技术：

2.在前端开发的过程中会涉及到从图像中取色，并将取到的颜色显示至终端的需求。例如，智能家居想要控制网器的灯光颜色，需先选取对应的色值，再将色值传输至智能家居以供智能家居控制灯光显示。
3.目前，市面上已有的取色器在样式上大多较为相似，其风格和ui(user interface，用户界面)较为单一，因此，在部分情况下，使用市面上已有的取色器不能满足开发需求，此时，设计一种支持自定义ui的取色器以满足开发需求成为了目前亟待解决的技术问题。


技术实现要素：

4.本发明提供一种取色方法、装置、电子设备和存储介质，用以解决现有技术中取色器不支持自定义ui的缺陷。
5.本发明提供一种取色方法，包括：
6.接收用户上传的ui取色盘图片；
7.加载并显示所述ui取色盘图片；
8.接收用户基于显示的ui取色盘图片的取色操作，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值；
9.对所述取色位置处的色值进行显示。
10.根据本发明提供的一种取色方法，所述加载并显示所述ui取色盘图片，包括：
11.获取所述ui取色盘图片的上传路径；
12.基于所述ui取色盘图片的上传路径，加载所述ui取色盘图片；
13.基于预先设置的显示方式，显示所述ui取色盘图片。
14.根据本发明提供的一种取色方法，所述基于预先设置的显示方式，显示所述ui取色盘图片，包括：
15.基于预先创建的图像容器标签所包含的图像绘制方式，绘制所述ui取色盘图片。
16.根据本发明提供的一种取色方法，所述确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值，包括：
17.获取所述取色操作在所述ui取色盘图片中对应取色位置处的像素数据；
18.基于所述像素数据，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值。
19.根据本发明提供的一种取色方法，所述获取所述取色操作在所述ui取色盘图片中对应取色位置处的像素数据，包括：
20.基于预先创建的图像容器标签所包含的图像数据获取方式，获取所述取色操作在所述ui取色盘图片中对应取色位置处的像素数据。
21.根据本发明提供的一种取色方法，所述基于所述像素数据，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值，包括：
22.对所述像素数据中的各通道数据进行数据拼接，基于数据拼接所得的数据确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值。
23.本发明还提供一种取色装置，包括：
24.接收单元，用于接收用户上传的ui取色盘图片；
25.加载单元，用于加载并显示所述ui取色盘图片；
26.色值确定单元，用于接收用户基于显示的ui取色盘图片的取色操作，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值；
27.显示单元，用于对所述取色位置处的色值进行显示。
28.根据本发明提供的一种取色装置方法，所述加载单元用于：
29.获取所述ui取色盘图片的上传路径；
30.基于所述ui取色盘图片的上传路径，加载所述ui取色盘图片；
31.基于预先设置的显示方式，显示所述ui取色盘图片。
32.本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述的取色方法的步骤。
33.本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述的取色方法的步骤。
34.本发明提供的取色方法、装置、电子设备和存储介质，通过接收用户基于显示的ui取色盘图片的取色操作，确定取色操作在ui取色盘图片中对应取色位置处的色值，对取色位置处的色值进行显示，解决了传统取色器不支持自定义ui的问题，实现了通过自定义ui取色盘图片进行实时取色。
附图说明
35.为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
36.图1是本发明实施例提供的取色方法的流程示意图；
37.图2是本发明实施例提供的取色方法的总体流程图；
38.图3是本发明提供的取色装置的结构示意图；
39.图4是本发明提供的电子设备的结构示意图。
具体实施方式
40.为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，
而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
41.目前，大多数取色器的风格和ui单一，不支持自定义ui，且都是基于hsv(hue saturation value)颜色模型设计制作的。hsv颜色模型中，hsv三个字母中h代表色调hue，s代表饱和度saturation，v代表明度value。其中，色调hue用角度度量，取值范围为0
°
～360
°
；饱和度saturation表示颜色接近光谱色的程度，饱和度越低越接近白色；明度value表示颜色明亮的程度，明度越低越接近黑色。
42.由于上述种种原因，导致在前端开发的过程中，在部分情况下使用现有的取色器进行开发不能达到很好的开发效果，或者是不能满足开发需求。
43.另外，由于市面上已有的取色器大多是封装好的，若想在已有的取色器的基础上更改ui，使得更改后的取色器能够支持自定义ui，则需下载取色器的源码，并对取色器的源码进行更改，但更改源码难度非常大，不仅需要了解取色器源码设置的原理，还需阅读大量的相关源码，经过多番学习后才可对源码进行变更，而且还不一定能够成功。若源码过于复杂，则通过更改源码以实现支持自定义ui的成功率更低。基于上述种种原因，在现有取色器的基础上变更源码，使得变更后的取色器能够支持自定义ui，这一方案的可行性太低。
44.针对上述问题，本发明实施例提供了一种支持自定义ui的取色方法，用以满足用户的开发需求。图1为本发明实施例提供的取色方法的流程示意图，如图1所示，该方法的执行主体是ui取色系统。
45.该方法包括：
46.步骤110，接收用户上传的ui取色盘图片；
47.此处，ui取色盘图片即用户根据开发需求对ui进行设置的取色盘图片，取色盘图片即用于取色的图片。取色即颜色选取，取出的颜色可以使用特定数值的理论描述。例如，三原色模式、像素数据等。
48.具体地，在根据ui取色盘图片进行取色之前，需将ui取色盘图片上传至ui取色系统，ui取色系统接收用户上传的ui取色盘图片。
49.步骤120，加载并显示ui取色盘图片；
50.具体地，在步骤110中ui取色系统接收到用户上传的ui取色盘图片之后，可根据ui取色盘图片的上传路径加载用户上传的ui取色盘图片。
51.随后，可对加载的ui取色盘图片进行显示。
52.步骤130，接收用户基于显示的ui取色盘图片的取色操作，确定取色操作在ui取色盘图片中对应取色位置处的色值；
53.此处，色值是一种颜色在不同的颜色模式中所对应的颜色值。如红色在rgb颜色模式中所对应的值是255，0，0；绿色在rgb颜色模式中所对应的值是0，255，0；蓝色在rgb颜色模式中所对应的值是0，0，255。
54.具体地，ui取色盘图片加载以及显示完成之后，用户可在显示的ui取色盘图片中的任一位置进行取色操作，取色操作可以是点击操作，也可以是滑动操作。即用户可点击显示的ui取色盘图片中任一位置，也可在ui取色盘图片的任一位置进行滑动操作，ui取色系统接收到用户在显示的ui取色盘图片中的取色操作后，需确定该取色操作在ui取色盘图片中对应取色位置处的色值，即确定用户在ui取色盘图片中取色位置处的色值。
55.步骤140，对取色位置处的色值进行显示。
56.具体地，在经过上述步骤得到取色操作在ui取色盘图片中对应取色位置处的色值后，还需将得到的取色操作在ui取色盘图片中对应取色位置处的色值进行显示。
57.本发明实施例提供的取色方法，通过接收用户基于显示的ui取色盘图片的取色操作，确定取色操作在ui取色盘图片中对应取色位置处的色值，对取色位置处的色值进行显示，解决了传统取色器不支持自定义ui的问题，实现了通过自定义ui取色盘图片进行实时取色。
58.基于上述实施例，步骤120包括：
59.获取ui取色盘图片的上传路径；
60.基于ui取色盘图片的上传路径，加载ui取色盘图片；
61.基于预先设置的显示方式，显示ui取色盘图片。
62.具体地，经过步骤110接收到用户上传的ui取色盘图片后，需获取ui取色盘图片的上传路径，此后，即可根据获取到的ui取色盘图片的上传路径，将ui取色盘图片加载至ui取色系统。加载ui取色盘图片的具体方式可以是创建img标签，将img标签的路径设置为用户上传的ui取色盘图片的上传路径，基于img标签的路径加载ui取色盘图片；此处的img标签是将外部图片嵌入到html页面中进行显示的标签，img标签并不会在html页面中插入图片，而是将图片链接到html页面上。img标签创建的是被嵌入图片的占位空间。
63.ui取色盘图片加载完成后，还需对加载完成的ui取色盘图片进行显示，具体显示方式可以是根据预先设置的显示方式对ui取色盘图片进行显示。此处，预先设置的显示方式可以是当img标签处于onload状态时，基于canvas标签的上下文绘制ui取色盘图片。需要说明的是，在绘制ui取色盘图片之前还需创建canvas标签，获取canvas标签的上下文。此处的canvas标签是html5提供的用于定义图形、图表和其他图像的标签。canvas标签只是图形容器(画布)，还必须使用脚本绘制图像，此处的脚本可以是javascript。由于canvas标签本身没有任何效果，因此canvas标签必须和脚本配合使用以绘制图像。canvas标签的上下文即canvas标签的标签属性。
64.ui取色盘图片加载完成后，img标签会处于onload状态，onload状态即在页面或图片加载完成后立即发生的状态。onload常用在<body>中，在所有内容加载完成后(包括图像、脚本文件、css文件等)，执行一段脚本。ui取色盘图片加载和显示的具体实现流程可以是：
65.创建canvas标签，获取canvas标签的上下文；
66.创建img标签，并基于img标签的路径加载ui取色盘图片，img标签的路径为ui取色盘图片的上传路径；
67.当img标签处于onload状态时，基于canvas标签的上下文绘制ui取色盘图片。
68.基于上述实施例，步骤120中，基于预先设置的显示方式，显示所述ui取色盘图片，包括：
69.基于预先创建的图像容器标签所包含的图像绘制方式，绘制ui取色盘图片。
70.具体地，当ui取色盘图片加载完成后，还需对ui取色盘图片进行显示，具体的显示方式可以是根据预先创建的图像容器标签所包含的图像绘制方式，对ui取色盘图片进行显示。预先创建的图像容器标签可以是canvas标签，其包含的图像绘制方式可以是canvas标
签的上下文中的drawimage方法。此处的drawimage方法用于在画布上绘制图像。例如，drawimage方法可以用于画图、合成图像和制作动画，还可以用于绘制图像的某些部分，以及增大或减小图像的尺寸。
71.ui取色盘图片具体的显示流程可以是：当img标签处于onload状态时，可调用canvas标签的上下文中的drawimage方法绘制用户上传的ui取色盘图片，对ui取色盘图片进行显示。
72.基于上述实施例，步骤130包括：
73.获取取色操作在ui取色盘图片中对应取色位置处的像素数据；
74.基于像素数据，确定取色操作在ui取色盘图片中对应取色位置处的色值。
75.此处的像素数据即表征取色操作在ui取色盘图片中对应取色位置处的像素的数据。像素是指由一个数字序列表示的图像中的一个最小单位。
76.具体地，在接收到用户在显示的ui取色盘图片中的取色操作后，可获取取色操作在ui取色盘图片中对应取色位置处的像素数据。
77.随后，可根据获取到的取色操作在ui取色盘图片中对应取色位置处的像素数据，进一步确定该取色操作在ui取色盘图片中对应取色位置处的色值。
78.基于上述实施例，步骤130中，获取取色操作在ui取色盘图片中对应取色位置处的像素数据，包括：
79.基于预先创建的图像容器标签所包含的图像数据获取方式，获取取色操作在ui取色盘图片中对应取色位置处的像素数据。
80.具体地，在接收到用户在显示的ui取色盘图片中的取色操作后，还需获取该取色操作在ui取色盘图片中对应取色位置处的像素数据，具体获取像素数据的方式可以是根据预先创建的图像容器标签所包含的图像数据获取方式，获取该取色位置处的像素数据。获取的像素数据中的每个像素都存在四方面的信息，分别为rgba。
81.其中，r表示红色(0
‑
255)；g表示绿色(0
‑
255)；b表示蓝色(0
‑
255)；a表示alpha通道(0
‑
255；0表示透明的，255表示完全可见)，alpha以数组形式存在，并存储于imagedata对象的data属性中。
82.预先创建的图像容器标签可以是canvas标签，其包含的图像数据获取方式可以是canvas标签的上下文中的getimagedata方法。此处的getimagedata方法用于获取画布上指定位置处的像素数据。getimagedata方法返回imagedata对象，该对象拷贝了画布指定位置处的像素数据。
83.具体获取像素数据流程可以是：接收到用户基于显示的ui取色盘图片的取色操作后，可调用canvas标签的上下文中的getimagedata方法获取取色操作在ui取色盘图片中对应取色位置处的像素数据。
84.基于上述实施例，步骤130中，基于像素数据，确定取色操作在ui取色盘图片中对应取色位置处的色值，包括：
85.对像素数据中的各通道数据进行数据拼接，基于数据拼接所得的数据确定取色操作在ui取色盘图片中对应取色位置处的色值。
86.由于获取到的取色操作在ui取色盘图片中对应取色位置处的像素数据是rgba值，rgba值比较零散，不适合直接使用rgba值表征取色操作在ui取色盘图片中对应取色位置处
的色值，因此，还需对得到的像素数据进行进一步处理。
87.具体地，在得到取色操作在ui取色盘图片中对应取色位置处的像素数据后，还可对得到的像素数据中的各通道数据进行数据拼接，得到拼接后的数据。此处的通道数据可以是r通道的数据、g通道的数据、b通道的数据、a通道的数据等。
88.此后，即可根据数据拼接后得到的数据确定取色操作在ui取色盘图片中对应取色位置处的色值。
89.基于上述实施例，图2是本发明实施例提供的取色方法的总体流程图，如图2所示，该方法包括：
90.步骤210，接收用户上传的ui取色盘图片；
91.步骤220，获取ui取色盘图片的上传路径；
92.步骤230，基于ui取色盘图片的上传路径，加载ui取色盘图片；
93.步骤240，基于预先创建的图像容器标签所包含的图像绘制方式，绘制ui取色盘图片；
94.步骤250，接收用户基于显示的ui取色盘图片的取色操作；
95.步骤260，基于预先创建的图像容器标签所包含的图像数据获取方式，获取取色操作在ui取色盘图片中对应取色位置处的像素数据；
96.步骤270，对像素数据中的各通道数据进行数据拼接，基于数据拼接所得的数据确定取色操作在ui取色盘图片中对应取色位置处的色值。
97.下面对本发明提供的取色装置进行描述，下文描述的取色装置与上文描述的取色方法可相互对应参照。
98.图3是本发明提供的取色装置的结构示意图，如图3所示，该装置包括：
99.接收单元310，用于接收用户上传的ui取色盘图片；
100.加载单元320，用于加载并显示所述ui取色盘图片；
101.色值确定单元330，用于接收用户基于显示的ui取色盘图片的取色操作，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值；
102.显示单元340，用于对所述取色位置处的色值进行显示。
103.本发明提供的取色装置，通过接收用户基于显示的ui取色盘图片的取色操作，确定取色操作在ui取色盘图片中对应取色位置处的色值，对取色位置处的色值进行显示，解决了传统取色器不支持自定义ui的问题，实现了通过自定义ui取色盘图片进行实时取色。
104.基于上述实施例，加载单元320用于：
105.获取所述ui取色盘图片的上传路径；
106.基于所述ui取色盘图片的上传路径，加载所述ui取色盘图片；
107.基于预先设置的显示方式，显示所述ui取色盘图片。
108.基于上述实施例，加载单元320用于：
109.基于预先创建的图像容器标签所包含的图像绘制方式，绘制所述ui取色盘图片。
110.基于上述实施例，色值确定单元330用于：
111.获取所述取色操作在所述ui取色盘图片中对应取色位置处的像素数据；
112.基于所述像素数据，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值。
113.基于上述实施例，色值确定单元330用于：
114.基于预先创建的图像容器标签所包含的图像数据获取方式，获取所述取色操作在所述ui取色盘图片中对应取色位置处的像素数据。
115.基于上述实施例，色值确定单元330用于：
116.对所述像素数据中的各通道数据进行数据拼接，基于数据拼接所得的数据确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值。
117.图4示例了一种电子设备的实体结构示意图，如图4所示，该电子设备可以包括：处理器(processor)410、通信接口(communications interface)420、存储器(memory)430和通信总线440，其中，处理器410，通信接口420，存储器430通过通信总线440完成相互间的通信。处理器410可以调用存储器430中的逻辑指令，以执行取色方法，该方法包括：接收用户上传的ui取色盘图片；加载并显示所述ui取色盘图片；接收用户基于显示的ui取色盘图片的取色操作，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值；对所述取色位置处的色值进行显示。
118.此外，上述的存储器430中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read
‑
only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
119.另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法所提供的取色方法，该方法包括：接收用户上传的ui取色盘图片；加载并显示所述ui取色盘图片；接收用户基于显示的ui取色盘图片的取色操作，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值；对所述取色位置处的色值进行显示。
120.又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各提供的取色方法，该方法包括：接收用户上传的ui取色盘图片；加载并显示所述ui取色盘图片；接收用户基于显示的ui取色盘图片的取色操作，确定所述取色操作在所述ui取色盘图片中对应取色位置处的色值；对所述取色位置处的色值进行显示。
121.以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
122.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上
述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
123.最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。