91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-10-10 08:46:17 來源:腳本之家 閱讀:155 作者:laozhang 欄目:web開發

題目要求

找出一個頁面中出現次數最多的標簽!!!

個人解法:

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、結果預覽

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

5、to Do

相似色值合并

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

優化聚類算法

提高復雜度,提升性能,提升執行速度

結合可視化的一些東西

6、總結

數據多的處理還是放在后端比較合適,畢竟可以利用分布式框架等多端計算。

而瀏覽器處理數據的能力還是有限。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

铜梁县| 和田县| 正阳县| 临邑县| 大埔区| 西贡区| 雷山县| 黄冈市| 和顺县| 曲麻莱县| 垫江县| 汾西县| 桐梓县| 交口县| 澄江县| 公主岭市| 若尔盖县| 阿巴嘎旗| 原阳县| 大新县| 甘德县| 泸西县| 阿克苏市| 滨海县| 镶黄旗| 无棣县| 闻喜县| 永胜县| 广水市| 综艺| 花莲县| 尼勒克县| 隆德县| 鹤壁市| 鄂伦春自治旗| 涞水县| 云阳县| 兰溪市| 滁州市| 华亭县| 柳林县|