当你需要根据不同图片显示不同的边框色或背景色时,你可以使用React-Color-Thief, 它会告诉你这张图片有哪些颜色,并按颜色比重返回RGB值给你。

如何使用
const colorThief = new ColorThief()
colorThief.getColor(imgDom) //需要在Image onload完成后调用
colorThief.getColorFromUrl(imgUrl).then(...) //异步方法,返回一个Promise
//返回8个占比最多的颜色
const colorThief = new ColorThief()
colorThief.getPalette(imgDom, 8) //需要在Image onload完成后调用
ColorThief 方法
| function | returns |
|---|---|
| getColor(imgDom[, quality]) | [r, g, b] |
| getPalette(imgDom[, colorCount, quality]) | [ [r, g, b], [r, g, b], ...] |
| getColorFromUrl(imgUrl[, quality]) | [r, g, b] |
| getColorAsync(imgUrl[, quality]) | [r, g, b] |
| convertColorRgb(rgbArray) | "rgb(r, g, b)" |
colorCount 颜色数量,默认返回10组颜色
quality 精确度(整数),1是最精确的,默认值是10。值越大抓取速度越快,准确度越低。