前端图片主题色提取

图片主题色在图片所占比例较大的页面中，能够配合图片起到很好视觉效果，给人一种和谐、一致的感觉。同时也可用在图像分类，搜索识别等方面。通常主题色的提取都是在后端完成的，前端将需要处理的图片以链接或id的形式提供给后端，后端通过运行相应的算法来提取出主题色后，再返回相应的结果。

这样可以满足大多数展示类的场景，但对于需要根据用户“定制”、“生成”的图片，这样的方式就有了一个上传图片---->后端计算---->返回结果的时间，等待时间也许就比较长了。由此，我尝试着利用 在前端进行图片主题色的提取。

一、主题色算法

目前比较常用的主题色提取算法有：最小差值法、中位切分法、八叉树算法、聚类、色彩建模法等。其中聚类和色彩建模法需要对提取函数和样本、特征变量等进行调参和回归计算，用到 的数值计算库 和机器学习库 ，用 来实现相对比较简单，而目前这两种都没有成熟的js库，并且js本身也不擅长回归计算这种比较复杂的计算。我也就没有深入的研究，而主要将目光放在了前面的几个颜色量化算法上。

而最小差值法是在给定给定调色板的情况下找到与色差最小的颜色，使用的场景比较小，所以我主要看了中位切分法和八叉树算法，并进行了实践。

中位切分法

中位切分法通常是在图像处理中降低图像位元深度的算法，可用来将高位的图转换位低位的图，如将24bit的图转换为8bit的图。我们也可以用来提取图片的主题色，其原理是是将图像每个像素颜色看作是以R、G、B为坐标轴的一个三维空间中的点，由于三个颜色的取值范围为0~255，所以图像中的颜色都分布在这个颜色立方体内，如下图所示。

之后将RGB中最长的一边从颜色统计的中位数一切为二，使得到的两个长方体所包含的像素数量相同，如下图所示

重复这个过程直到切出长方体数量等于主题色数量为止，最后取每个长方体的中点即可。

在实际使用中如果只是按照中点进行切割，会出现有些长方体的体积很大但是像素数量很少的情况。解决的办法是在切割前对长方体进行优先级排序，排序的系数为体积 * 像素数。这样就可以基本解决此类问题了。

八叉树算法

八叉树算法也是在颜色量化中比较常见的，主要思路是将R、G、B通道的数值做二进制转换后逐行放下，可得到八列数字。如 转换后为

再将RGB通道逐列粘合，可以得到8个数字，即为该颜色在八叉树中的位置，如图。

在将所有颜色插入之后，再进行合并运算，直到得到所需要的颜色数量为止。

在实际操作中，由于需要对图像像素进行遍历后插入八叉树中，并且插入过程有较多的递归操作，所以比中位切分法要消耗更长的时间。

二、中位切分法实践

根据之前的介绍和网上的相关资料，此处贴上我自己理解实现的中位切分法代码，并且找了几张图片将结果与QQ音乐已有的魔法色相关算法进行比较，图一为中位切分法结果，图二为后台cgi返回结果

图一

图二

可以看到有一定的差异，但是差值相对都还比较小的，处理速度在pc上面还是比较快的，三张图分别在70ms,100ms,130ms左右。这里贴上代码，待后续批量处理进行对比之后再分析。

三、八叉树算法实践

也许是我算法实现的问题，使用八叉树算法得到的最终结果并不理想，所消耗的时间相对于中位切分法也长了不少，平均时间分别为160ms,250ms,400ms还是主要看八叉树算法吧...同样贴上代码

四、结果对比

在批量跑了10000张图片之后，得到了下面的结果

平均耗时对比（js-cgi)

可以看到在不考虑图片加载时间的情况下，用中位切分法提取的耗时相对较短，而图片加载的耗时可以说是难以逾越的障碍了（整整拖慢了450ms），不过目前的代码还有不错的优化空间，比如间隔采样，绘制到canvas时减小图片尺寸，优化切割点查找等，就需要后续进行更深一点的探索了。

颜色偏差

所以看来准确性还是可以的，约76%的颜色与cgi提取结果相近，在大于100的中抽查后发现有部分图片两者提取到的主题色各有特点，或者平分秋色，比如

五、小结

总结来看，通过canvas的中位切分法与cgi提取的结果相似程度还是比较高的，也有许多图片有很大差异，需要在后续的实践中不断优化。同时，图片加载时间也是一个难以逾越的障碍，不过目前的代码还有不错的优化空间，比如间隔采样，绘制到canvas时减小图片尺寸，优化切割点查找等，就需要后续进行更深一点的探索了。

参考文章

http://acm.nudt.edu.cn/~twcourse/ColorQuantization.html

https://xcoder.in/2014/09/17/theme-color-extract/

http://blog.rainy.im/2015/11/24/extract-color-themes-from-images/

https://xinyo.org/archives/66115

https://xinyo.org/archives/66352

https://github.com/lokesh/color-thief/

http://y.qq.com/m/demo/2018/magic_color.html