获取图片中的颜色动态设置背景色（colorThief）-CSDN博客

本文链接：https://blog.csdn.net/qq_40696108/article/details/130950436

文章介绍了如何利用colorThief库在鼠标移入图片时获取图片的主要颜色，并通过异步方法设置容器的渐变背景色，从而达到动态效果。主要步骤包括创建colorThief实例，调用getPalette方法获取色值，以及设置CSS背景颜色。

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

首先看对比图
在这里插入图片描述

上述的三张图分别是鼠标移入某个图片后根据获取的图片的原色动态设置的容器渐变背景
那么想要实现这个效果，我们必须先搞定一件事。鼠标移入某个图片获取当前图片的原色
主角上场：colorThief colorThief

具体怎么操作呢：

    import colorThief from 'colorthief';
    //new的方式创建
    const ColorThief = new colorThief();

构建一个获取并执行操作的方法

    async function setBgColor(img:object,src:string){
      //ColorThief 接收两个参数，一个是图片本身，一个是色值获取的范围
      //.getPalette 用来执行该获取像素色值的行为
           const colors= await ColorThief.getPalette(img, 3)
           console.log(colors) 
         }

在这里插入图片描述
分解获取到的色值执行填充背景

        async function setBgColor(img:object,src:string){
           let el:any =document.getElementsByClassName('mod_cot')[0]
           const colors= await ColorThief.getPalette(img, 3)
           const [c1,c2,c3]  =  colors.map((c:any)=>`rgb(${c[1]},${c[1]},${c[2]})`);
           el.style.background=`linear-gradient(${c1} 0%,${c2} 50%,${c3} 100%`
         }