資訊專(zhuān)欄INFORMATION COLUMN
摘要：工作時(shí)遇到一個(gè)需求提取圖片主題色，通過(guò)某種映射關(guān)系，選取給出的對(duì)應(yīng)顏色。腦海中浮現(xiàn)如果只是純前端如何實(shí)現(xiàn)呢一思路與準(zhǔn)備利用獲取圖像像素信息，然后用某種算法將主題顏色提取出來(lái)。
工作時(shí)遇到一個(gè)需求：提取圖片主題色，通過(guò)某種映射關(guān)系，選取ui給出的對(duì)應(yīng)顏色。腦海中浮現(xiàn)如果只是純前端如何實(shí)現(xiàn)呢？
一、思路與準(zhǔn)備利用canvas獲取圖像像素信息，然后用某種算法將主題顏色提取出來(lái)。
1.1 了解Canvas畫(huà)布真實(shí)像素原理MDN: 事實(shí)上，你可以直接通過(guò)getImageData，返回一個(gè)imageData對(duì)象，獲取場(chǎng)景像素?cái)?shù)據(jù)。
imageData對(duì)象包含下列幾個(gè)只讀屬性：
width：圖片寬度，單位是像素
height：圖片高度，單位是像素
data：Uint8ClampedArray類(lèi)型的一維數(shù)組，包含著RGBA格式的整型數(shù)據(jù)，范圍在0至255之間（包括255）。
data屬性返回一個(gè) Uint8ClampedArray，它可以被使用作為查看初始像素?cái)?shù)據(jù)。每個(gè)像素用4個(gè) 1 bytes值(按照紅，綠，藍(lán)和透明值的順序,"RGBA"格式) 來(lái)代表。每個(gè)顏色值部份用0至255來(lái)代表。每個(gè)部分被分配到一個(gè)在數(shù)組內(nèi)連續(xù)的索引，左上角像素的紅色部分在數(shù)組的索引0位置。像素從左到右被處理，然后往下，遍歷整個(gè)數(shù)組。
Uint8ClampedArray 包含高度 × 寬度 × 4 bytes數(shù)據(jù)，索引值從0到(高度×寬度×4)-1
中位切分法通常是在圖像處理中降低圖像位元深度的算法，可用來(lái)將高位的圖轉(zhuǎn)換位低位的圖，如將24bit的圖轉(zhuǎn)換為8bit的圖。我們也可以用來(lái)提取圖片的主題色，其原理是是將圖像每個(gè)像素顏色看作是以R、G、B為坐標(biāo)軸的一個(gè)三維空間中的點(diǎn)，由于三個(gè)顏色的取值范圍為0~255，所以圖像中的顏色都分布在這個(gè)顏色立方體內(nèi)。如圖所示：
之后將RGB中最長(zhǎng)的一邊從顏色統(tǒng)計(jì)的中位數(shù)一切為二，使得到的兩個(gè)長(zhǎng)方體所包含的像素?cái)?shù)量相同，如下圖所示重復(fù)這個(gè)過(guò)程直到切出長(zhǎng)方體數(shù)量等于主題色數(shù)量為止，最后取每個(gè)長(zhǎng)方體的中點(diǎn)即可。
在實(shí)際使用中如果只是按照中點(diǎn)進(jìn)行切割，會(huì)出現(xiàn)有些長(zhǎng)方體的體積很大但是像素?cái)?shù)量很少的情況。解決的辦法是在切割前對(duì)長(zhǎng)方體進(jìn)行優(yōu)先級(jí)排序，排序的系數(shù)為體積 * 像素?cái)?shù)。這樣就可以基本解決此類(lèi)問(wèn)題了。
其中color-thief庫(kù)就是基于中位切分法實(shí)現(xiàn)的。
參考：Pixels and Palettes: Extracting Color Palettes From Images
Pixel_manipulation_with_canvas_By MDN
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98476.html
摘要：所以不妨試試查找二叉樹(shù)這樣的數(shù)據(jù)結(jié)構(gòu)，二叉樹(shù)的優(yōu)勢(shì)在于每次查找的時(shí)間會(huì)指數(shù)級(jí)下降，以此加快程序運(yùn)行。綜合起來(lái)看，在一定的樣本量區(qū)間，還是使用原生的效率更高，這個(gè)區(qū)間在本文指的是種顏色，當(dāng)然我還是相信當(dāng)顏色更多的時(shí)候，二叉樹(shù)還是有它的優(yōu)勢(shì)的。 本文github項(xiàng)目：colorful color 我的codepen鏈接：圖像顏色提取the demo 原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明 最近想找個(gè)小項(xiàng)...
摘要：由此，我嘗試著利用在前端進(jìn)行圖片主題色的提取。一主題色算法目前比較常用的主題色提取算法有最小差值法中位切分法八叉樹(shù)算法聚類(lèi)色彩建模法等。 本文由云+社區(qū)發(fā)表 圖片主題色在圖片所占比例較大的頁(yè)面中，能夠配合圖片起到很好視覺(jué)效果，給人一種和諧、一致的感覺(jué)。同時(shí)也可用在圖像分類(lèi)，搜索識(shí)別等方面。通常主題色的提取都是在后端完成的，前端將需要處理的圖片以鏈接或id的形式提供給后端，后端通過(guò)運(yùn)行相...
摘要：由此，我嘗試著利用在前端進(jìn)行圖片主題色的提取。一主題色算法目前比較常用的主題色提取算法有最小差值法中位切分法八叉樹(shù)算法聚類(lèi)色彩建模法等。 本文由云+社區(qū)發(fā)表 圖片主題色在圖片所占比例較大的頁(yè)面中，能夠配合圖片起到很好視覺(jué)效果，給人一種和諧、一致的感覺(jué)。同時(shí)也可用在圖像分類(lèi)，搜索識(shí)別等方面。通常主題色的提取都是在后端完成的，前端將需要處理的圖片以鏈接或id的形式提供給后端，后端通過(guò)運(yùn)行相...
摘要：由此，我嘗試著利用在前端進(jìn)行圖片主題色的提取。一主題色算法目前比較常用的主題色提取算法有最小差值法中位切分法八叉樹(shù)算法聚類(lèi)色彩建模法等。 本文由云+社區(qū)發(fā)表 圖片主題色在圖片所占比例較大的頁(yè)面中，能夠配合圖片起到很好視覺(jué)效果，給人一種和諧、一致的感覺(jué)。同時(shí)也可用在圖像分類(lèi)，搜索識(shí)別等方面。通常主題色的提取都是在后端完成的，前端將需要處理的圖片以鏈接或id的形式提供給后端，后端通過(guò)運(yùn)行相...
閱讀 1585·2021-10-14 09:42
閱讀 3829·2021-09-07 09:59
閱讀 1310·2019-08-30 15:55
閱讀 585·2019-08-30 11:17
閱讀 3350·2019-08-29 16:06
閱讀 514·2019-08-29 14:06
閱讀 3142·2019-08-28 18:14
閱讀 3658·2019-08-26 13:55
