js: color-thief在浏览器中拾取图片的主色调

彭世瑜

已于 2022-10-09 10:28:50 修改

阅读量1.2k

点赞数

文章标签： javascript 前端开发语言

于 2022-10-09 10:27:58 首次发布

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/127222052

版权

本文介绍了一个使用Javascript从图像中提取颜色调色板的方法，该方法可在浏览器和Node.js环境中运行。通过实例展示了如何利用Color Thief库进行颜色提取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

译文：使用Javascript从图像中抓取调色板。在浏览器和Node.js中工作。

文档：

使用示例

浏览器中

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>

<script>
  const colorThief = new ColorThief();
  const img = new Image();

  img.addEventListener("load", function () {
    let color = colorThief.getColor(img);
    console.log(color);
    // [125, 190, 193]
  });

  img.crossOrigin = "Anonymous";
  img.src = "./image.jpg";
</script>

一个简单实现

const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = "./image.jpg";
img.setAttribute("width", 1);
img.setAttribute("height", 1);

img.onload = () => {
    const canvas = new OffscreenCanvas(1, 1);
    const ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, 1, 1);
    const { data } = ctx.getImageData(0, 0, 1, 1);
    console.log(`rgba(${data.join(",")})`);
    // rgba(120,143,122,255)
};