資訊專欄INFORMATION COLUMN
摘要：下面看今天這個問題獲取一張圖片的主色值和上面最多標簽的問題很類似，數據大小有區別，別的都差不多的。這個問題思路很清晰，第一步，拿到圖片的數據第二步，根據色值進行聚類第三步，對聚類結果排序。
先來一道面試題熱熱身。
題目要求
找出一個頁面中出現次數最多的標簽！！！
個人解法：
var eles = document.getElementsByTagName("*");
var rs = [];
for(var i=0; i
思路：
拿到所有的標簽--根據標簽名稱聚類---根據權重排序。
如果有更好的方法，歡迎交流。
下面看今天這個問題：
獲取一張圖片的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
這樣就可以拿到圖片的所有數據了，剩下的就是數學問題了。
2、數據聚類
去重,相同色值合并，記錄該色值出現個數（權重）weight
聚類方法就比較多了，直接數學統計，或者k-means,決策樹，樸素貝葉斯，支持向量機等等，喜歡哪個就用哪個就可以了，但是還是需要考慮下不同方法的適用情況和效率什么的了。
我們會得到這樣一個數組 [{rgba: "21,12,45,0", weight: 12}, {...}]來記錄色值和出現次數,
3、聚類結果排序
對上一步中得到的json數組進行排序，根據屬性weight的值從大到小或者從小到大排序，排序算法就不用多言了。
4、結果預覽
5、to Do
相似色值合并
rgba(234,234,234,1)和rgba(234,235,235,1)類似的這種是否有必要合并成為一個值，這里又會涉及到相似度計算等問題。
優化聚類算法
提高復雜度，提升性能，提升執行速度
結合可視化的一些東西
6、總結
數據多的處理還是放在后端比較合適，畢竟可以利用分布式框架等多端計算。
而瀏覽器處理數據的能力還是有限。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92775.html
假設我們的pm有這樣一個需求, 一張簡單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現在要求圖片的顏色能根據手機殼的顏色來變色...開個玩笑，一般這個時候已經打起來了 要求是用戶可以根據用戶點擊的按鈕顏色來設置圖片的顏色，也就是說我們的這張黑色主色的圖片遠遠無法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...
摘要：前言依稀記得幾年前朋友圈流行的辨色小游戲，找出顏色不同的矩形。前些天突發奇想，打算自己手寫一個類似的游戲，話不多說，先上。顏色由三色構成，三色值越接近，則顏色顯示越接近。 showImg(https://segmentfault.com/img/bVbhaOC?w=1003&h=474); 1. 前言 依稀記得幾年前朋友圈流行的辨色小游戲，找出顏色不同的矩形。前些天突發奇想，打算自己手...
摘要：單位值需要統一，如果參數存在單位不同，會報錯。亮度，單位百分數。增加到最大值了對色彩透明減少得到是一個混色灰度色值將兩種顏色混合，默認情況下，是取兩種顏色的十六進制轉為十進制相加后的平均值。 CSS編譯語言 編譯 瀏覽器中使用：less.min.js Node中編譯 lessc demo.less // 直接在cli中輸出 lessc demo.less test.css //...
閱讀 3457·2019-08-30 10:54
閱讀 3155·2019-08-29 16:38
閱讀 2176·2019-08-26 14:06
閱讀 1517·2019-08-23 15:39
閱讀 3043·2019-08-23 15:37
閱讀 2889·2019-08-23 13:50
閱讀 3195·2019-08-22 17:14
閱讀 2385·2019-08-22 15:44
