ColorThief调色盘 获取图片主题颜色改变页面的背景颜色

1.NPM地址  color-thief - npm

2.用途

ColorThief用于获取图片的包含的颜色，可以用获取到的颜色用作页面的背景颜色或者其他用途

3.效果

我在写demo的时候用了四张图片 排版成了一个四宫格的样式，鼠标分别凡在不同的图片时，可以看到页面的背景颜色发生了变化，当鼠标离开的时候可以将页面的背景颜色重置为白色

鼠标放在第一张时

鼠标放在第二张

鼠标放在第三张

鼠标放在第四张

 

4.代码实现

这里用VUE + VITE +TS写了一个demo供大家参考

下载依赖 不同的包管理工具要使用不同的命令，我这里使用的是pnpm

pnpm install color-thief

在vite.config.ts中引入并配置vite插件

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Inspect from 'vite-plugin-inspect'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Inspect()],
})

html部分:

遍历四张图片，在img标签上添加鼠标移入、移出事件 style联内样式是设置选中的图片和未选中图片的透明度，四张图片是由Lorem Picsum随机生成的

<template>
  <div class="palette_container" ref="palette">
    <div class="grid">
      <!--      遍历四张图片，在img标签上添加鼠标移入、移出事件 style联内样式是设置选中的图片和未选中图片的透明度-->
      <div class="item" v-for="(url,i) in images" :key="i">
        <img crossorigin="anonymous" :src="url" alt="" @mouseenter="handleMouseEnter($event.target,i)"
             @mouseleave="handleMouseLeave" :style="{opacity:hoverIndex===-1?1:i===hoverIndex?1:0.2,transition:'0.5s'}">
      </div>
    </div>
  </div>
</template>

ts:部分

详情步骤看注释

<script lang="ts" setup>
import ColorThief from "colorthief"
import {ref, nextTick} from "vue"

const colorThief = new ColorThief()
// 创建响应式数组,用来保存图片地址
let images = ref([])
//绑定ref 获取dom
let palette = ref(null)
//向上面创建的响应式数组中添加图片地址
for (let i = 0; i < 4; i++) {
  images.value.push(`https://picsum.photos/500/500?random=${i}`)
}
//创建响应式变量，用来区分图片的移入和移出的状态
const hoverIndex = ref(-1)
//鼠标移入函数
const handleMouseEnter = async (img, i) => {
  hoverIndex.value = i
  //通过colorThief.getPalette(img,3) 获取图片中的三种颜色
  //getPalette()函数接受两个参数 第一个参数是目标图片，第二个参数是要获取颜色的数量，该函数返回的是一个二维数组 二维数组的每一个元素是 rgb格式的颜色
  let colors = await colorThief.getPalette(img, 3)
  console.log(colors)
  //遍历二维数组 将颜色处理成我们想要的rgb格式
  colors = colors.map((c) => `rgb(${c[0]},${c[1]},${c[2]})`)
  //通过操作dom修改页面的背景颜色，将背景颜色设置为向右的三色渐变背景
  palette.value.style.setProperty('background', `linear-gradient(to right, ${colors[0]}, ${colors[1]},${colors[2]})`);
}

//离开图片时将页面背景颜色重置为白色
const handleMouseLeave = () => {
  hoverIndex.value = -1
  palette.value.style.setProperty('background', '#fff');
}
</script>

css:

css部分是一个简单的网格布局

.palette_container {
  width: 100%;
}

.grid {
  margin: auto;
  width: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
  background: transparent;
}

上面这个事例供大家参考，有问题欢迎指出！！！