一款开源JavaScript库，实现图片背景色智能提取与融合——AutoHue.js

AutoHue.js是一个基于JavaScript开发的开源库，它能够自动提取图片的主题色和边缘色，并返回这些颜色的十六进制值。这些颜色可以用于设置背景颜色、渐变效果或其他样式，从而让图片与页面设计更好地融合。它通过分析图片的像素数据，提取出图片的主要颜色（主题色）和边缘颜色（上下左右四边的颜色）。这些颜色可以通过聚类算法计算得出，确保提取的颜色能够代表图片的整体风格。

AutoHue.js主要功能和特点如下：

1、图片主题色提取：

AutoHue.js能够从图片中自动提取主色、次主题色和背景色，解决了传统手动标注背景色的繁琐过程。这种方法特别适用于处理渐变色图片或颜色复杂度较高的图片，避免了使用其他开源库（如color-thief、vibrant.js或rgbaster.js）时的局限性。

2、背景融合功能：

该工具不仅能够提取颜色，还能将图片与背景融为一体，提供更灵活的背景填充效果。这一功能在设计中尤为重要，因为它能够显著提升页面的整体视觉效果。

3、开源与灵活性：

AutoHue.js是一个开源项目，用户可以根据自己的需求对其进行自定义和扩展。这种灵活性使得开发者能够更好地适应不同的设计需求。

4、解决现有工具的局限性：

在设计过程中，传统的背景填充方法需要手动标注背景色，而AutoHue.js提供了一种自动化解决方案，极大地简化了设计流程。此外，它还解决了其他开源工具在处理渐变色或复杂颜色图片时的不足。

5、应用场景广泛：

AutoHue.js可以广泛应用于网页设计、图形设计、数据分析与可视化等领域，帮助设计师和开发者提高工作效率，同时确保设计的色彩统一性和视觉效果。

AutoHue.js的应用场景包括：

1、动态背景颜色：根据图片的主题色动态设置背景颜色，使页面整体风格更加协调。

2、渐变背景：使用图片的边缘颜色生成渐变背景，增强视觉效果。

3、自定义样式：结合主题色和边缘色，为页面元素添加自定义样式，提升用户体验。

AutoHue.js使用方法：

安装：

pnpm i autohue.js

使用例子：

import autohue from 'autohue.js'

autohue(url, {
  threshold: {
    primary: 10,
    left: 1,
    bottom: 12
  },
  maxSize: 50
})
  .then((result) => {
    // 使用 console.log 打印出色块元素s
    console.log(`%c${result.primaryColor}`, 'color: #fff; background: ' + result.primaryColor, 'main')
    console.log(`%c${result.secondaryColor}`, 'color: #fff; background: ' + result.secondaryColor, 'sub')
    console.log(`%c${result.backgroundColor.left}`, 'color: #fff; background: ' + result.backgroundColor.left, 'bg-left')
    console.log(`%c${result.backgroundColor.right}`, 'color: #fff; background: ' + result.backgroundColor.right, 'bg-right')
    console.log(`%clinear-gradient to right`, 'color: #fff; background: linear-gradient(to right, ' + result.backgroundColor.left + ', ' + result.backgroundColor.right + ')', 'bg')
    bg.value = `linear-gradient(to right, ${result.backgroundColor.left}, ${result.backgroundColor.right})`
  })
  .catch((err) => console.error(err))

参数说明：

进入AutoHue.js官方网址