圖像提取主題色

工做時遇到一個需求：提取圖片主題色，經過某種映射關係，選取ui給出的對應顏色。腦海中浮現若是隻是純前端如何實現呢？

1、思路與準備

利用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庫就是基於中位切分法實現的。

參考：

Pixels and Palettes: Extracting Color Palettes From Images
Pixel_manipulation_with_canvas_By MDN