摘要：下面看今天这个问题获取一张图片的主色值和上面最多标签的问题很类似，数据大小有区别，别的都差不多的。这个问题思路很清晰，第一步，拿到图片的数据第二步，根据色值进行聚类第三步，对聚类结果排序。
先来一道面试题热热身。
题目要求
找出一个页面中出现次数最多的标签！！！
个人解法：
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、总结
数据多的处理还是放在后端比较合适，毕竟可以利用分布式框架等多端计算。
而浏览器处理数据的能力还是有限。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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 //...
阅读 3462·2019-08-30 10:54
阅读 3158·2019-08-29 16:38
阅读 2185·2019-08-26 14:06
阅读 1520·2019-08-23 15:39
阅读 3044·2019-08-23 15:37
阅读 2891·2019-08-23 13:50
阅读 3198·2019-08-22 17:14
阅读 2391·2019-08-22 15:44
