javascript獲取圖片的top N主色值方法詳解

更新時間：2018年01月26日 16:14:14 投稿：laozhang

本篇文章是小編整理的關(guān)于javascript獲取圖片的top N主色值方法的詳解以及代碼分享，有興趣的朋友參考下吧。

題目要求

找出一個頁面中出現(xiàn)次數(shù)最多的標簽?。?！

個人解法：

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);

思路：

拿到所有的標簽--根據(jù)標簽名稱聚類---根據(jù)權(quán)重排序。

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

下面看今天這個問題：

獲取一張圖片的top N主色值,和上面最多標簽的問題很類似，數(shù)據(jù)大小有區(qū)別，別的都差不多的。

這個問題思路很清晰，第一步，拿到圖片的數(shù)據(jù)；第二步，根據(jù)色值進行聚類；第三步，對聚類結(jié)果排序。所以這次就是根據(jù)這個思路去實現(xiàn)。

1、數(shù)據(jù)獲取

圖片數(shù)據(jù)獲取使用了canvas的getImageData()方法，能獲取到圖片每個像素點的rgba數(shù)據(jù)。

var imgdatas=context.getImageData(0,0,150,150);//獲取當前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<len ; i+=4 ) {
  arr.push(imgdata[i]+','+imgdata[i+1]+','+imgdata[i+2]+','+imgdata[i+3]);  
}

這樣就可以拿到圖片的所有數(shù)據(jù)了，剩下的就是數(shù)學問題了。

2、數(shù)據(jù)聚類

去重,相同色值合并，記錄該色值出現(xiàn)個數(shù)（權(quán)重）weight

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

3、聚類結(jié)果排序

對上一步中得到的json數(shù)組進行排序，根據(jù)屬性weight的值從大到小或者從小到大排序，排序算法就不用多言了。

4、結(jié)果預覽