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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
js更优雅的兼容
Aug 12 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
javascript无刷新评论实现方法
May 13 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Node.js从字符串生成文件流的实现方法
Aug 18 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面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
Jquery ui css framework
2010/06/28 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python实现键盘输入的实操方法
2019/07/16 Python
python模拟斗地主发牌
2020/04/22 Python
python编写实现抽奖器
2020/09/10 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
给排水专业应届生求职信
2013/10/12 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
地方白酒代理协议书
2014/10/25 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Python pygame实现中国象棋单机版源码
2021/06/20 Python
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js