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

样例

tce_example.jpg

总结

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

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

 [踩坑]关于PHP写小程序后台时的BOM头
typecho你好 
上一篇:[踩坑]关于PHP写小程序后台时的BOM头
下一篇:typecho你好


已有 2 条评论


  1. 保罗(凑数)
    保罗(凑数)

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

     Reply
    1. mr158
      mr158

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

       Reply

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ