canvas實(shí)現(xiàn)提取圖片主題色的方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)canvas實(shí)現(xiàn)提取圖片主題色的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、左貢網(wǎng)絡(luò)推廣、微信小程序開發(fā)、左貢網(wǎng)絡(luò)營(yíng)銷、左貢企業(yè)策劃、左貢品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供左貢建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

一、思路與準(zhǔn)備

利用canvas獲取圖像像素信息，然后用某種算法將主題顏色提取出來。

1.1 了解Canvas畫布真實(shí)像素原理

MDN: 事實(shí)上，你可以直接通過getImageData，返回一個(gè)imageData對(duì)象，獲取場(chǎng)景像素?cái)?shù)據(jù)。

imageData對(duì)象包含下列幾個(gè)只讀屬性：

width：圖片寬度，單位是像素

height：圖片高度，單位是像素

data：Uint8ClampedArray類型的一維數(shù)組，包含著RGBA格式的整型數(shù)據(jù)，范圍在0至255之間（包括255）。

data屬性返回一個(gè) Uint8ClampedArray，它可以被使用作為查看初始像素?cái)?shù)據(jù)。每個(gè)像素用4個(gè) 1 bytes值(按照紅，綠，藍(lán)和透明值的順序,"RGBA"格式) 來代表。每個(gè)顏色值部份用0至255來代表。每個(gè)部分被分配到一個(gè)在數(shù)組內(nèi)連續(xù)的索引，左上角像素的紅色部分在數(shù)組的索引0位置。像素從左到右被處理，然后往下，遍歷整個(gè)數(shù)組。
Uint8ClampedArray  包含高度 × 寬度 × 4 bytes數(shù)據(jù)，索引值從0到(高度×寬度×4)-1

1.2 了解中位切分法 （Median cut）

中位切分法通常是在圖像處理中降低圖像位元深度的算法，可用來將高位的圖轉(zhuǎn)換位低位的圖，如將24bit的圖轉(zhuǎn)換為8bit的圖。我們也可以用來提取圖片的主題色，其原理是是將圖像每個(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è)過程直到切出長(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ù)。這樣就可以基本解決此類問題了。

其中color-thief庫(kù)就是基于中位切分法實(shí)現(xiàn)的。

關(guān)于canvas實(shí)現(xiàn)提取圖片主題色的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站名稱：canvas實(shí)現(xiàn)提取圖片主題色的方法-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article40/deioeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站建設(shè)、云服務(wù)器、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)