autohue.js

autohue.js 是一个自动提取图片主题色 & 边缘色的工具。

它的核心目标：

• 从图片中提取 主题色（面积最大）
• 提取 次主题色（面积第二大）
• 获取图片 上下左右的边缘色（方便生成背景渐变）

这样，图片在网页或 App 中就能和背景“无缝衔接”，看起来更自然。

安装

pnpm i autohue.js

使用

import autohue from'autohue.js'

autohue(url, {
threshold: {
    primary: 10,
    left: 1,
    bottom: 12
  },
maxSize: 50
})
  .then((result) => {
    console.log('主题色', result.primaryColor)
    console.log('次主题色', result.secondaryColor)
    console.log('左边缘色', result.backgroundColor.left)
    console.log('右边缘色', result.backgroundColor.right)

    // 自动生成渐变背景
    const bg = `linear-gradient(to right, ${result.backgroundColor.left}, ${result.backgroundColor.right})`
    document.body.style.background = bg
  })
  .catch((err) =>console.error(err))

参考

https://mp.weixin.qq.com/s/Zm7d5XvyPP6QfwfJKR51Iw