成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

didikee / 3237人閱讀

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

先來一道面試題熱熱身。

題目要求

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

個(gè)人解法：

var eles = document.getElementsByTagName("*");
var rs = [];
for(var i=0; i

思路：


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


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


下面看今天這個(gè)問題：


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


這個(gè)問題思路很清晰，第一步，拿到圖片的數(shù)據(jù)；第二步，根據(jù)色值進(jìn)行聚類；第三步，對聚類結(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é)問題了。        


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


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


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


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


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


4、結(jié)果預(yù)覽




5、to Do


相似色值合并


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


優(yōu)化聚類算法


提高復(fù)雜度，提升性能，提升執(zhí)行速度


結(jié)合可視化的一些東西


6、總結(jié)


數(shù)據(jù)多的處理還是放在后端比較合適，畢竟可以利用分布式框架等多端計(jì)算。


而瀏覽器處理數(shù)據(jù)的能力還是有限。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92775.html

相關(guān)文章

  • 【靈活運(yùn)用CSS】

    假設(shè)我們的pm有這樣一個(gè)需求, 一張簡單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現(xiàn)在要求圖片的顏色能根據(jù)手機(jī)殼的顏色來變色...開個(gè)玩笑，一般這個(gè)時(shí)候已經(jīng)打起來了 要求是用戶可以根據(jù)用戶點(diǎn)擊的按鈕顏色來設(shè)置圖片的顏色，也就是說我們的這張黑色主色的圖片遠(yuǎn)遠(yuǎn)無法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...

    icyfire 評論0 收藏0

  • 【靈活運(yùn)用CSS】

    假設(shè)我們的pm有這樣一個(gè)需求, 一張簡單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現(xiàn)在要求圖片的顏色能根據(jù)手機(jī)殼的顏色來變色...開個(gè)玩笑，一般這個(gè)時(shí)候已經(jīng)打起來了 要求是用戶可以根據(jù)用戶點(diǎn)擊的按鈕顏色來設(shè)置圖片的顏色，也就是說我們的這張黑色主色的圖片遠(yuǎn)遠(yuǎn)無法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...

    lewinlee 評論0 收藏0

  • 【靈活運(yùn)用CSS】

    假設(shè)我們的pm有這樣一個(gè)需求, 一張簡單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現(xiàn)在要求圖片的顏色能根據(jù)手機(jī)殼的顏色來變色...開個(gè)玩笑，一般這個(gè)時(shí)候已經(jīng)打起來了 要求是用戶可以根據(jù)用戶點(diǎn)擊的按鈕顏色來設(shè)置圖片的顏色，也就是說我們的這張黑色主色的圖片遠(yuǎn)遠(yuǎn)無法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...

    mudiyouyou 評論0 收藏0

  • ES6 手寫一個(gè)“辨色”小游戲

    摘要：前言依稀記得幾年前朋友圈流行的辨色小游戲，找出顏色不同的矩形。前些天突發(fā)奇想，打算自己手寫一個(gè)類似的游戲，話不多說，先上。顏色由三色構(gòu)成，三色值越接近，則顏色顯示越接近。 showImg(https://segmentfault.com/img/bVbhaOC?w=1003&h=474); 1. 前言 依稀記得幾年前朋友圈流行的辨色小游戲，找出顏色不同的矩形。前些天突發(fā)奇想，打算自己手...

    feng409 評論0 收藏0

  • LESS

    摘要：單位值需要統(tǒng)一，如果參數(shù)存在單位不同，會報(bào)錯(cuò)。亮度，單位百分?jǐn)?shù)。增加到最大值了對色彩透明減少得到是一個(gè)混色灰度色值將兩種顏色混合，默認(rèn)情況下，是取兩種顏色的十六進(jìn)制轉(zhuǎn)為十進(jìn)制相加后的平均值。 CSS編譯語言 編譯 瀏覽器中使用：less.min.js Node中編譯 lessc demo.less // 直接在cli中輸出 lessc demo.less test.css //...

    zhangrxiang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<