Color-thief

利用 javascript 和 canvas 抓取一张图片中的主要颜色

Color Thief

A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.

See a Demo | Read more on my blog

How to use

Get the dominant color from an image

var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
getColor(sourceImage[, quality])
returns {r: num, g: num, b: num}

Build a color palette from an image

In this example, we build an 8 color palette.

var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])
returns [ [num, num, num], [num, num, num], ... ]

Changelog

v2.0.1 - 2015-10-05

  • [Fix] Remove left-over references to Creative Commons License. MIT all-around.
  • [Fix] MMCQ lib issues #16 by @nobodypb
  • [Fix] Incorrect bower.json main property path. #37 by @chellem, @joscha, @dkushner
  • [Fix] Quality less than 1 causes infinite loop #33 by @nteike
  • [Fix] MMCQ.quantize(...) can return false or undefined thus breaking the application (#55)[https://github.com/lokesh/color-thief/pull/55] by @mhahmadi
  • [Remove] Drop version number from bower.json #70 by @kkirsche

v2.0.0 - 2013-06-23

  • Embed quantize into color thief file
  • Strip out jQuery requirement
  • Credit those who helped with edits - Nathan Spady for drag and drop support.

Color Thief

利用 Javascript 和 canvas 标签来从一张图片中抓取调色板。

查看 Demo | 阅读我的博文

如何使用

获取一张图片的主要颜色

var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
getColor(sourceImage[, quality])
returns {r: num, g: num, b: num}

从一张图片中创建调色板

在这个示例中,我们创建一个包含8个颜色的调色板。

var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])
returns [ [num, num, num], [num, num, num], ... ]

更新日志

v2.0.1 - 2015-10-05

  • [Fix] Remove left-over references to Creative Commons License. MIT all-around.
  • [Fix] MMCQ lib issues #16 by @nobodypb
  • [Fix] Incorrect bower.json main property path. #37 by @chellem, @joscha, @dkushner
  • [Fix] Quality less than 1 causes infinite loop #33 by @nteike
  • [Fix] MMCQ.quantize(...) can return false or undefined thus breaking the application (#55)[https://github.com/lokesh/color-thief/pull/55] by @mhahmadi
  • [Remove] Drop version number from bower.json #70 by @kkirsche

v2.0.0 - 2013-06-23

  • Embed quantize into color thief file
  • Strip out jQuery requirement
  • Credit those who helped with edits - Nathan Spady for drag and drop support.

讨论区