React组件: 提取图片颜色-CSDN博客

当你需要根据不同图片显示不同的边框色或背景色时，你可以使用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。值越大抓取速度越快，准确度越低。