JavaScript 获取图片 Top N 主色值详解

题目背景与思路

题目要求

首先需要解决一个问题：找出页面中出现频率最高的 HTML 标签。

以下是个人的解题思路：

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

当数据量较大时，将处理逻辑放在后端更为合适，因为可以利用分布式框架进行多端计算。

而浏览器处理大量数据的能力相对有限。