寻求实现基于图片平均色的CSS投影悬停效果的简易JS库

嘿，这个效果确实质感拉满！我刚好有几个轻量好用的JS库能帮你快速搞定，不用自己从零写颜色提取和动画逻辑：

• color-thief：这是最经典的图片主色提取库，体积小、API简单，完全能满足你的需求。
  用法示例：

  // 初始化ColorThief实例
  const colorThief = new ColorThief();
  // 获取目标图片元素
  const img = document.querySelector('.portfolio-img');
  
  // 预加载图片后提取平均色（避免跨域问题，建议图片和网站同域或配置CORS）
  img.addEventListener('load', () => {
    const averageColor = colorThief.getColor(img);
    // 把颜色存在元素的data属性里，方便悬停时快速调用
    img.dataset.averageColor = `rgb(${averageColor.join(',')})`;
  });
  
  // 绑定悬停事件
  img.addEventListener('mouseenter', function() {
    this.style.boxShadow = `0 8px 20px ${this.dataset.averageColor}80`;
  });
  
  img.addEventListener('mouseleave', function() {
    this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)'; // 还原默认投影
  });
  

  记得给图片元素加上CSS过渡：transition: box-shadow 0.3s ease;，让投影变化更丝滑。

• fast-average-color：如果你的作品集里有大量高清图，这个库的性能会更好，它支持异步处理、跨域图片（只需配置crossOrigin: true），还能提取不同类型的主色（比如暗色、亮色）。
  用法示例：

  import FastAverageColor from 'fast-average-color';
  
  const fac = new FastAverageColor();
  const img = document.querySelector('.portfolio-img');
  
  // 提取平均色
  fac.getColorAsync(img, { crossOrigin: 'anonymous' })
    .then(color => {
      img.dataset.averageColor = color.rgb;
    });
  
  // 悬停逻辑和上面一致，直接读取data属性应用投影
  

额外小技巧 #

• 提前预加载所有图片并提取颜色，存在元素的data属性中，这样用户悬停时不会有延迟，体验更流畅；
• 可以给投影加一点透明度（比如上面示例中的${color}80），让效果更柔和自然，不会太突兀。

内容的提问来源于stack exchange，提问作者Ruxie