JS图片颜色提取插件 - TinyColorExtractor

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],...])
});

样例

总结

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

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

JS图片颜色提取插件 - TinyColorExtractor

使用方法

接收的参数

options

样例

总结

添加新评论

已有 2 条评论

保罗（凑数）

mr158