javascript获取图片的top N主色值方法详解
更新时间：2018年01月26日 16:14:14 投稿：laozhang
本篇文章是小编整理的关于javascript获取图片的top N主色值方法的详解以及代码分享，有兴趣的朋友参考下吧。
题目要求
找出一个页面中出现次数最多的标签！！！
个人解法：
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、结果预览
5、to Do
相似色值合并
rgba(234,234,234,1)和rgba(234,235,235,1)类似的这种是否有必要合并成为一个值，这里又会涉及到相似度计算等问题。
优化聚类算法
提高复杂度，提升性能，提升执行速度
结合可视化的一些东西
6、总结
数据多的处理还是放在后端比较合适，毕竟可以利用分布式框架等多端计算。
而浏览器处理数据的能力还是有限。
您可能感兴趣的文章:
相关文章
本文给大家汇总了在javascript方法中返回多个值的方法，都是在个人项目中检验过的，这里推荐给大家，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了JS操作COOKIE实现备忘记录的方法,涉及JavaScript针对cookie的读写操作相关技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了ES6基础之默认参数值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要为大家详细介绍了微信小程序实现全国机场索引列表，实现MUI索引列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
本篇文章主要是对js将数值转换为3位逗号分隔的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JS设计模式之访问者模式定义与用法,结合实例形式分析了javascript设计模式中访问者模式的概念、功能、应用场景及使用方法,需要的朋友可以参考下2018-02-02
这篇文章主要为大家详细介绍了Bootstrap模态对话框的简单使用，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了javaScript 逻辑运算符使用技巧整理的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了JS实现的论坛Ajax打分效果,以完整实例形式分析了JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了前端必备插件之纯原生JS的瀑布流插件Macy.js，一款非常轻量级的纯原生JS的瀑布流插件，有兴趣的可以了解一下2017-11-11
最新评论