事情时碰到一个需求：提取图片主题色，经由历程某种映照关联，拔取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，所以图象中的色彩都散布在这个色彩立方体内。如图所示：
以后将RGB中最长的一边从色彩统计的中位数统统为二，使获得的两个长方体所包含的像素数目雷同，如下图所示反复这个历程直到切出长方体数目即是主题色数目为止，末了取每一个长方体的中点即可。
在实际运用中假如只是根据中点举行切割，会出现有些长方体的体积很大然则像素数目很少的状况。处理的方法是在切割前对长方体举行优先级排序，排序的系数为体积 * 像素数。如许就能够基本处理此类问题了。
个中color-thief库就是基于中位切分法完成的。
以上就是怎样提取图片的主题色？的细致内容，更多请关注ki4网别的相干文章！
