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;
}
上面这个事例供大家参考,有问题欢迎指出!!!