colorthief应用 - 图片调色板

现在前端基本都依赖配置数据来生成相应的页面，在开发中遇见一个需求，让我根据不同的配置图片适配相应的色系背景。刚开始，我的想法是，需要配置相应的背景颜色，我直接css设置就行了，但是麻烦客户DDDD，没办法，只能自己提取了

思路

要提取图片的颜色，我们只能把图片通过canvas渲染，然后在进行提取，我们人眼很多颜色是区分不出来的，但是计算机可以，其中涉及到近似算法，图像聚合算法什么的，这我就无能为力了，只能用现成的了 - colorthief

实现

先实现基本的html

<div className="App">
<h1>图片调色板</h1>
<h2>Start editing to see some magic happen!</h2>
  {[1, 2, 3, 4, 5, 6].map((k) => (
    <div className="img_box" key={k}>
        <img
        alt=""
        crossOrigin="anonymous"
        src={`https://picsum.photos/200?key=${k}`}
        onMouseEnter={(e) => onMouseEnter(e.target, k)}
        onMouseLeave={onMouseLeave}
        className={k === value ? "selected_img" : "unselected_img"}
        />
    </div>
  ))}
</div>

然后 colorthief 提取颜色

const onMouseEnter = async (img, k) => {
    let colors = await colorthief.getPalette(img, 3);
    colors = colors.map((c) => `rgb(${c[0]}, ${c[1]}, ${c[2]})`);
    console.log(colors)
};  

打印一下

拿到颜色，然后在css设置上去就完事了

const onMouseEnter = async (img, k) => {
    let colors = await colorthief.getPalette(img, 3);
    colors = colors.map((c) => `rgb(${c[0]}, ${c[1]}, ${c[2]})`);
    html.style.setProperty("--color1", colors[0]);
    html.style.setProperty("--color2", colors[1]);
    html.style.setProperty("--color3", colors[2]);
};  

预览

color-thief

🔥🔥如果对您有一点帮助，给个👍鼓励一下吧！谢谢～🙏