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

tracy丶傑發表於2017-12-08
JavaScript

先來一道面試題熱熱身。

題目要求

找出一個頁面中出現次數最多的標籤！！！

個人解法：

var eles = document.getElementsByTagName('*');
var rs = [];
for(var i=0; i<eles.length; i++) {
	var tag_name = eles[i].tagName.toLowerCase();
	if(undefined != tag_name) {
		if(inJsonArray(rs, tag_name)) {
			addWeight(rs, tag_name);
		}else {
			rs.push({
				tag : tag_name,
				weight : 1
			})
		}				
	}			
}

SortByWeight(rs);
複製程式碼

思路：

拿到所有的標籤--根據標籤名稱聚類---根據權重排序。

如果有更好的方法，歡迎交流。

下面看今天這個問題：

獲取一張圖片的top N主色值,和上面最多標籤的問題很類似，資料大小有區別，別的都差不多的。

這個問題思路很清晰，第一步，拿到圖片的資料；第二步，根據色值進行聚類；第三步，對聚類結果排序。所以這次就是根據這個思路去實現。

1、資料獲取

圖片資料獲取使用了canvas的getImageData()方法，能獲取到圖片每個畫素點的rgba資料。

var imgdatas=context.getImageData(0,0,150,150);//獲取當前canvas資料
var imgdata = imgdatas.data;//獲取rgba資料
var i = 0, len = imgdata.length;
var arr = [];
//將圖片rgba資料push到新陣列中
for(i ; i<len ; i+=4 ) {
	arr.push(imgdata[i]+','+imgdata[i+1]+','+imgdata[i+2]+','+imgdata[i+3]);	
}
複製程式碼

這樣就可以拿到圖片的所有資料了，剩下的就是數學問題了。

2、資料聚類

去重,相同色值合併，記錄該色值出現個數（權重）weight

聚類方法就比較多了，直接數學統計，或者k-means,決策樹，樸素貝葉斯，支援向量機等等，喜歡哪個就用哪個就可以了，但是還是需要考慮下不同方法的適用情況和效率什麼的了。 我們會得到這樣一個陣列 [{rgba: '21,12,45,0', weight: 12}, {...}]來記錄色值和出現次數,

3、聚類結果排序

對上一步中得到的json陣列進行排序，根據屬性weight的值從大到小或者從小到大排序，排序演算法就不用多言了。

4、結果預覽

http://oetuly2ki.bkt.clouddn.com/QQ截圖20171023190854.png
複製程式碼

5、to Do

  • 相似色值合併

rgba(234,234,234,1)和rgba(234,235,235,1)類似的這種是否有必要合併成為一個值，這裡又會涉及到相似度計算等問題。

  • 優化聚類演算法

降低複雜度，提升效能，提升執行速度

  • 結合視覺化的一些東西

6、總結

資料多的處理還是放在後端比較合適，畢竟可以利用分散式框架等多端計算。

而瀏覽器處理資料的能力還是有限。

相關文章