利用javascript獲取圖片的top N主色值

didikee 發(fā)布于2019-08-22 14:01 / 3228人閱讀

摘要：下面看今天這個(gè)問(wèn)題獲取一張圖片的主色值和上面最多標(biāo)簽的問(wèn)題很類(lèi)似，數(shù)據(jù)大小有區(qū)別，別的都差不多的。這個(gè)問(wèn)題思路很清晰，第一步，拿到圖片的數(shù)據(jù)第二步，根據(jù)色值進(jìn)行聚類(lèi)第三步，對(duì)聚類(lèi)結(jié)果排序。

先來(lái)一道面試題熱熱身。

題目要求

找出一個(gè)頁(yè)面中出現(xiàn)次數(shù)最多的標(biāo)簽！！！

個(gè)人解法：

var eles = document.getElementsByTagName("*");
var rs = [];
for(var i=0; i
思路：
拿到所有的標(biāo)簽--根據(jù)標(biāo)簽名稱(chēng)聚類(lèi)---根據(jù)權(quán)重排序。
如果有更好的方法，歡迎交流。
下面看今天這個(gè)問(wèn)題：
獲取一張圖片的top N主色值,和上面最多標(biāo)簽的問(wèn)題很類(lèi)似，數(shù)據(jù)大小有區(qū)別，別的都差不多的。
這個(gè)問(wèn)題思路很清晰，第一步，拿到圖片的數(shù)據(jù)；第二步，根據(jù)色值進(jìn)行聚類(lèi)；第三步，對(duì)聚類(lèi)結(jié)果排序。所以這次就是根據(jù)這個(gè)思路去實(shí)現(xiàn)。
1、數(shù)據(jù)獲取
圖片數(shù)據(jù)獲取使用了canvas的getImageData()方法，能獲取到圖片每個(gè)像素點(diǎn)的rgba數(shù)據(jù)。
var imgdatas=context.getImageData(0,0,150,150);//獲取當(dāng)前canvas數(shù)據(jù)
var imgdata = imgdatas.data;//獲取rgba數(shù)據(jù)
var i = 0, len = imgdata.length;
var arr = [];
//將圖片rgba數(shù)據(jù)push到新數(shù)組中
for(i ; i
這樣就可以拿到圖片的所有數(shù)據(jù)了，剩下的就是數(shù)學(xué)問(wèn)題了。        
2、數(shù)據(jù)聚類(lèi)
去重,相同色值合并，記錄該色值出現(xiàn)個(gè)數(shù)（權(quán)重）weight
聚類(lèi)方法就比較多了，直接數(shù)學(xué)統(tǒng)計(jì)，或者k-means,決策樹(shù)，樸素貝葉斯，支持向量機(jī)等等，喜歡哪個(gè)就用哪個(gè)就可以了，但是還是需要考慮下不同方法的適用情況和效率什么的了。
我們會(huì)得到這樣一個(gè)數(shù)組 [{rgba: "21,12,45,0", weight: 12}, {...}]來(lái)記錄色值和出現(xiàn)次數(shù),
3、聚類(lèi)結(jié)果排序
對(duì)上一步中得到的json數(shù)組進(jìn)行排序，根據(jù)屬性weight的值從大到小或者從小到大排序，排序算法就不用多言了。
4、結(jié)果預(yù)覽

5、to Do
相似色值合并
rgba(234,234,234,1)和rgba(234,235,235,1)類(lèi)似的這種是否有必要合并成為一個(gè)值，這里又會(huì)涉及到相似度計(jì)算等問(wèn)題。
優(yōu)化聚類(lèi)算法
提高復(fù)雜度，提升性能，提升執(zhí)行速度
結(jié)合可視化的一些東西
6、總結(jié)
數(shù)據(jù)多的處理還是放在后端比較合適，畢竟可以利用分布式框架等多端計(jì)算。
而瀏覽器處理數(shù)據(jù)的能力還是有限。