提取图片主题色的方法、装置、电子设备和存储介质与流程

本申请涉及计算机，尤其涉及一种提取图片主题色的方法、装置、电子设备和存储介质。

背景技术：

1、提取图片主题色主要用于网站、应用的界面设计，自适应颜色方案可以随着内容的变化(如轮播图、文章配图等)动态调整，确保颜色协调一致，使得网站在任何背景下都显得美观。用户体验是现代网页设计的核心，自适应颜色可以帮助创建一致性且吸引人的视觉体验。提取图片主题色可以确保背景颜色与显示的图片保持一致，提高用户的沉浸感。

2、目前提取图片主题色的方式中，对象存储的智能多媒体服务提供图片处理功能，但属于付费服务，需要购买才可使用。或者使用高斯模糊将图片放大很多倍，再模糊作为背景色，但是其相当于只是把图片模糊之后作为背景图，并不能拿到真正的颜色值，且其结果并不精确，很受图片放大之后视口区域(dom元素区域)内的颜色影响，假如图片整体是彩色，但是放大之后视口区域内正好是白色，那么其主题色就会显示白色，这基本就是错误的，所以存在很大的偏差。

技术实现思路

1、本申请提供了一种提取图片主题色的方法、装置、电子设备和存储介质，以解决提取图片主题色偏差较大的问题。

2、第一方面，本申请提供了一种提取图片主题色的方法，所述方法包括：

3、获取网站或应用软件的界面中目标图像的图像数据；

4、通过canvas的方法获取所述图像数据中每个像素的rgb颜色；

5、采用八叉树对每个像素的rgb颜色进行量化，得到所述八叉树中每个叶子节点的计数值，其中，每个叶子节点的计数值用于指示一种颜色在所述目标图像中出现的频率；

6、选取计数值最高的前n个颜色作为所述界面中的主题色，n为正整数。

7、可选地，采用八叉树对每个像素的rgb颜色进行量化，得到所述八叉树中每个叶子节点的计数值包括：

8、遍历所述图像数据中的每个像素，对每个所述像素执行目标操作：

9、采用八叉树颜色量化算法确定所述像素的rgb颜色是否命中任意一个叶子节点，其中，每个叶子节点用于指示颜色空间中的一个颜色区域；

10、若命中，则对命中的叶子节点的计数值加一；

11、若未命中，则查找与所述像素的rgb颜色最相近的叶子节点，并对所述最相近的叶子节点的计数值加一。

12、可选地，采用八叉树颜色量化算法确定所述像素的rgb颜色是否命中任意一个叶子节点包括：

13、将所述像素的rgb颜色采用三维坐标的方式标记；

14、按照根节点的索引，确定所述像素的三维坐标所在的坐标范围对应的目标子节点，其中，所述八叉树中每个节点的颜色区域具有对应的坐标范围；

15、根据所述目标子节点的索引，确定所述像素的三维坐标所在的坐标范围对应的叶子节点。

16、可选地，查找与所述像素的rgb颜色最相近的叶子节点包括：

17、确定所述目标子节点的各叶子节点的坐标范围；

18、确定所述像素的三维坐标与各叶子节点的坐标范围之间的近似度；

19、选取近似度最大的叶子节点作为所述最相近的叶子节点。

20、可选地，通过canvas的方法获取所述图像数据中每个像素的rgb颜色包括：

21、通过onload回调函数将所述目标图像绘制到canvas元素上；

22、通过canvas.getcontext('2d')获取所述canvas元素的上下文环境对象；

23、调用drawimage()方法将所述目标图像绘制到画布上；

24、通过getimagedata()方法从所述上下文环境对象中获取imagedata对象，其中，所述imagedata对象包含所述图像数据中每个像素的rgb颜色。

25、可选地，选取计数值最高的前n个颜色作为所述界面中的主题色之后，所述方法还包括：

26、通过层叠样式表设置所述网站或所述应用软件中的背景颜色与所述目标图像协调一致。

27、可选地，获取网站或应用软件的界面中目标图像的图像数据包括：

28、在html页面上创建一个不可见的img元素；

29、将所述img元素的src属性设置为网站或应用软件的界面中目标图像的统一资源定位符；

30、依据所述统一资源定位符，采用所述img元素加载所述目标图像。

31、第二方面，本申请提供了一种提取图片主题色的装置，所述装置包括：

32、第一获取模块，用于获取网站或应用软件的界面中目标图像的图像数据；

33、第二获取模块，用于通过canvas的方法获取所述图像数据中每个像素的rgb颜色；

34、量化模块，用于采用八叉树对每个像素的rgb颜色进行量化，得到所述八叉树中每个叶子节点的计数值，其中，每个叶子节点的计数值用于指示一种颜色在所述目标图像中出现的频率；

35、选取模块，用于选取计数值最高的前n个颜色作为所述界面中的主题色，n为正整数。

36、第三方面，本申请提供了一种电子设备，包括：至少一个通信接口；与所述至少一个通信接口相连接的至少一个总线；与所述至少一个总线相连接的至少一个处理器；与所述至少一个总线相连接的至少一个存储器。

37、第四方面，本申请还提供了一种计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令用于执行本申请上述任一项所述的提取图片主题色的方法。

38、本申请实施例提供的上述技术方案与现有技术相比具有如下优点：采用canvas方法获取到图像数据中每个像素的rgb颜色后，采用八叉树色彩量化的计算，将大量的像素rgb颜色量化为简单的叶子节点的计数值，再提取出现频率最频繁的几个颜色作为代表性的颜色，从而得到主题色。相对于现有技术中高斯模糊导致的主题色提取不准确，本申请没有高倍度的放大图片，而是提取出现频率较多颜色作为主题色，提高主题色提取的准确性。

技术特征：

1.一种提取图片主题色的方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，采用八叉树对每个像素的rgb颜色进行量化，得到所述八叉树中每个叶子节点的计数值包括：

3.根据权利要求1所述的方法，其特征在于，采用八叉树颜色量化算法确定所述像素的rgb颜色是否命中任意一个叶子节点包括：

4.根据权利要求3所述的方法，其特征在于，查找与所述像素的rgb颜色最相近的叶子节点包括：

5.根据权利要求1所述的方法，其特征在于，通过canvas的方法获取所述图像数据中每个像素的rgb颜色包括：

6.根据权利要求1所述的方法，其特征在于，选取计数值最高的前n个颜色作为所述界面中的主题色之后，所述方法还包括：

7.根据权利要求1所述的方法，其特征在于，获取网站或应用软件的界面中目标图像的图像数据包括：

8.一种提取图片主题色的装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-7任一所述的方法。

技术总结本申请涉及一种提取图片主题色的方法、装置、电子设备和存储介质，所述方法包括：获取网站或应用软件的界面中目标图像的图像数据；通过canvas的方法获取所述图像数据中每个像素的RGB颜色；采用八叉树对每个像素的RGB颜色进行量化，得到所述八叉树中每个叶子节点的计数值，其中，每个叶子节点的计数值用于指示一种颜色在所述目标图像中出现的频率；选取计数值最高的前n个颜色作为所述界面中的主题色，n为正整数。本申请提高主题色提取的准确性。技术研发人员：关文峰,程斌,黄贤栋,张达,高玉石受保护的技术使用者：北京轻松怡康信息技术有限公司技术研发日：技术公布日：2024/11/18