javascript获取图片的top N主色值方法详解


Posted in Javascript onJanuary 26, 2018

题目要求

找出一个页面中出现次数最多的标签!!!

个人解法:

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、总结

数据多的处理还是放在后端比较合适,毕竟可以利用分布式框架等多端计算。

而浏览器处理数据的能力还是有限。

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
js+css在交互上的应用
Jul 18 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
Vue中render方法的使用详解
Jan 26 #Javascript
Angular利用trackBy提升性能的方法
Jan 26 #Javascript
微信小程序版翻牌小游戏
Jan 26 #Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 #Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 #Javascript
微信小程序实现animation动画
Jan 26 #Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
You might like
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php的curl封装类用法实例
2014/11/07 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
python的exec、eval使用分析
2017/12/11 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python实现广度优先搜索过程解析
2019/10/19 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
如何用Python 加密文件
2020/09/10 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
商务会议邀请函
2014/01/09 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
司机个人年终总结
2015/03/03 职场文书
小学推普周活动总结
2015/05/07 职场文书
话题作文之成长
2019/12/09 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js