圖像提取主題色

mingzhong 發布于2019-08-23 12:25 / 1467人閱讀

摘要：工作時遇到一個需求提取圖片主題色，通過某種映射關系，選取給出的對應顏色。腦海中浮現如果只是純前端如何實現呢一思路與準備利用獲取圖像像素信息，然后用某種算法將主題顏色提取出來。

工作時遇到一個需求：提取圖片主題色，通過某種映射關系，選取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庫就是基于中位切分法實現的。

參考：

Pixels and Palettes: Extracting Color Palettes From Images
Pixel_manipulation_with_canvas_By MDN

云服務器 GPU云服務器 matlab中彩色圖像識別圖像識別和圖像提取的區別圖像識別前景提取圖像識別特征提取

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98476.html

圖像顏色提取

摘要：所以不妨試試查找二叉樹這樣的數據結構，二叉樹的優勢在于每次查找的時間會指數級下降，以此加快程序運行。綜合起來看，在一定的樣本量區間，還是使用原生的效率更高，這個區間在本文指的是種顏色，當然我還是相信當顏色更多的時候，二叉樹還是有它的優勢的。本文github項目：colorful color 我的codepen鏈接：圖像顏色提取the demo 原創文章，轉載請注明最近想找個小項...

geekzhou 2019-08-20 17:22 評論0 收藏0
如何對前端圖片主題色進行提取？這篇文章詳細告訴你

摘要：由此，我嘗試著利用在前端進行圖片主題色的提取。一主題色算法目前比較常用的主題色提取算法有最小差值法中位切分法八叉樹算法聚類色彩建模法等。本文由云+社區發表圖片主題色在圖片所占比例較大的頁面中，能夠配合圖片起到很好視覺效果，給人一種和諧、一致的感覺。同時也可用在圖像分類，搜索識別等方面。通常主題色的提取都是在后端完成的，前端將需要處理的圖片以鏈接或id的形式提供給后端，后端通過運行相...

jkyin 2019-08-02 14:05 評論0 收藏0
如何對前端圖片主題色進行提取？這篇文章詳細告訴你

摘要：由此，我嘗試著利用在前端進行圖片主題色的提取。一主題色算法目前比較常用的主題色提取算法有最小差值法中位切分法八叉樹算法聚類色彩建模法等。本文由云+社區發表圖片主題色在圖片所占比例較大的頁面中，能夠配合圖片起到很好視覺效果，給人一種和諧、一致的感覺。同時也可用在圖像分類，搜索識別等方面。通常主題色的提取都是在后端完成的，前端將需要處理的圖片以鏈接或id的形式提供給后端，后端通過運行相...

Neilyo 2019-08-23 14:40 評論0 收藏0
如何對前端圖片主題色進行提取？這篇文章詳細告訴你

摘要：由此，我嘗試著利用在前端進行圖片主題色的提取。一主題色算法目前比較常用的主題色提取算法有最小差值法中位切分法八叉樹算法聚類色彩建模法等。本文由云+社區發表圖片主題色在圖片所占比例較大的頁面中，能夠配合圖片起到很好視覺效果，給人一種和諧、一致的感覺。同時也可用在圖像分類，搜索識別等方面。通常主題色的提取都是在后端完成的，前端將需要處理的圖片以鏈接或id的形式提供給后端，后端通過運行相...

bovenson 2019-07-30 18:44 評論0 收藏0