github项目地址https://github.com/MR158/TinyColorExtractor

用ES6写的一个图片颜色提取插件,gulp构建压缩。
可以自定义提取颜色数量,提取精度,颜色容差范围(值越大,提取的颜色差距越大)

使用方法

<script src="dist/tiny-color-extractor.min.js"></script>
var TCE = new TinyColorExtractor(imgURl,function(data){
  console.log(data) // [[r,g,b],[r,g,b],...]
});

接收的参数

options

  • src

    • {String} 必选。
  • colorCount

    • {Number} 可选。设置提取的颜色数量
  • quality

    • {Number} 可选。数值范围在1-10,10是最高提取精度
  • tolerance

    • {Number} 可选。数值越大,提取的图片颜色相差越大
var TCE = new TinyColorExtractor({
  src: imgURL,
  colorCount: 10,
  quality: 5,
  tolerance: 10
},function(data){
  console.log(data) // Array([[r,g,b],[r,g,b],...])
});

样例

tce_example.jpg

总结

用的方法就是根据RGB出现频率来计算排位。对于颜色复杂度低的图片处理起来还是可以,比如扁平风,UI图标之类的。
如果处理复杂度高的图片,比如写实类的,难免会出现像素重复的多,但并非是视觉上占据主色的颜色的情况。
在这方面,在图片处理算法上需要改进,例如目前比较常用的中位切割法,其他也有聚类算法、欧氏距离算法、八叉树算法。
上述的中位切割和八叉树算法,在leptonica的颜色量化文章中有详细的讲解,感兴趣的可以了解一下。

github项目地址https://github.com/MR158/TinyColorExtractor

添加新评论

已有 2 条评论

  1. 保罗(凑数)

    一直都不知道这些是用什么API提取的,但又不想用别人的插件... 另外老哥你的评论文字太浅了看的很蒙

    1. mr158

      mr158

      博主

      其实就是canvas的api
      评论文字确实太浅啦,抽空改改