怎样提取图片的主题色？-
工作时碰到一个需求：提取图片主题色，通过某种映照关系，拔取ui给出的对应色彩。脑海中浮上要是只是纯前端怎样实现呢？
一、思绪与预备
应用canvas猎取图像像素信息，然后用某种算法将主题色彩提掏出来。
1.1 理解Canvas画布真实像素道理
MDN: 事实上，你可以直接通过getImageData，返回一个imageData对象，猎取场景像素数据。
imageData对象包括以下几个只读属性：
width：图片宽度，单位是像素
height：图片高度，单位是像素
data：Uint8ClampedArray类型的一维数组，包括着RGBA格局的整型数据，范畴在0至255之间（包含255）。
data属性返回一个 Uint8ClampedArray，它可以被运用作为查看初始像素数据。每个像素用4个
1 bytes值(按照红，绿，蓝和透亮值的次序,"RGBA"格局)
来代表。每个色彩值部份用0至255来代表。每个局部被分配到一个在数组内陆续的索引，左上角像素的红色局部在数组的索引0位置。像素从左到右被处置，然后往下，遍历整个数组。
Uint8ClampedArray 包括高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1
1.2 理解中位切分法 （Median cut）
中位切分法平常是在图像处置中落低图像位元深度的算法，可用来将高位的图转换位低位的图，如将24bit的图转换为8bit的图。我们也可以用来提取图片的主题色，其道理是是将图像每个像素色彩看作是以R、G、B为坐标轴的一个三维空间中的点，因为三个色彩的取值范畴为0~255，所以图像中的色彩都散布在这个色彩立方体内。如图所示：
在现实运用中要是只是按照中点进行切割，会涌现有些长方体的体积很大但是像素数目很少的状况。解决的方法是在切割前对长方体进行优先级排序，排序的系数为体积 * 像素数。这样就可以根本解决此类题目了。
其中color-thief库就是基于中位切分法实现的。
以上就是怎样提取图片的主题色？的细致内容，更多请关注 百分百源码网 其它相干文章！
