影象主題色的提取
工作時遇到一個需求：提取圖片主題色，通過某種對映關係，選取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中最長的一邊從顏色統計的中位數一切為二，使得到的兩個長方體所包含的畫素數量相同，如下圖所示重複這個過程直到切出長方體數量等於主題色數量為止，最後取每個長方體的中點即可。
在實際使用中如果只是按照中點進行切割，會出現有些長方體的體積很大但是畫素數量很少的情況。解決的辦法是在切割前對長方體進行優先順序排序，排序的係數為體積 * 畫素數。這樣就可以基本解決此類問題了。
其中 ofollow,noindex">color-thief 庫就是基於中位切分法實現的。