ColorThief的介绍与使用

news2024/9/20 9:43:17

概述

colorThief是一个 Javascript 插件，支持在浏览器端或 Node 环境中使用。Thief的中文意思是偷窃、小偷。colorThief的作用就是通过算法去获取图片的色源。

API 介绍与示例

colorThief提供两个方法，getColor和getPalette，这两个方法在 Node 环境中都是返回Promise。

`getColor`方法

getColor方法接收两个参数img和quality。

img：图像源，在浏览器环境中 img 需要传 HTML 元素节点，而在 Node 中,img是图像路径
quality：可选参数，数值类型，1 或者更大的数字。默认是 10，决定采样时跳过多少像素。值越大，返回速度越快。
效果

在这里插入图片描述

示例

doms.imgList.forEach((img) => {
  img.addEventListener("click", async (e) => {
    console.log("🚀 ~ img1.addEventListener ~ e:", e.target);

    const p = await colorThief.getPalette(e.target, 3);

    console.log("🚀 ~ doms.img1.addEventListener ~ p:", p);
    let colorArr = [];
    p.forEach((item, index) => {
      const [r, g, b] = item;
      colorArr[index] = `rgb(${r},${g},${b})`;
    });
    colorArr.forEach((color, i) => {
      document.documentElement.style.setProperty(`--color${i + 1}`, color);
    });
  });
});

`getPalette`方法

getPalette方法也是接收 3 个参数，通过聚类相似颜色从图像中获取调色板。返回值为一个数组。它比getColor方法多了第二个参数，其第二个参数是返回多少个颜色

效果

在这里插入图片描述

示例

const p = await colorThief.getColor(doms.img);
console.log("🚀 ~ initExample2 ~ p:", p);
doms.colorSpan[0].style.setProperty(
  "--color",
  `rgb(${p[0]},${p[1]},${p[2]})`
);

const count = doms.colorSpan.length;
const q = await colorThief.getPalette(doms.img, count);

q.forEach((item, index) => {
  const [r, g, b] = item;
  doms.colorSpan[index + 1].style.setProperty(
    "--color",
    `rgb(${r},${g},${b})`
  );
});