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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
原生js无缝轮播插件使用详解
Mar 09 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
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
如何利用python 读取配置文件
2021/01/06 Python
python 将Excel转Word的示例
2021/03/02 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
挂职思想汇报
2013/12/31 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
学校宣传标语
2014/06/18 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Redis入门教程详解
2021/08/30 Redis
JavaScript 数组去重详解
2021/09/15 Javascript
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
Win11开始菜单添加休眠选项
2022/04/19 数码科技