实现这个功能,用到了colorthief这款插件
npm install colorthief
- 可以通过 getColor(img) 方法获取到图像中最主要的一种颜色
- 也可以通过getPalette(img,num)方法获取到图像的调色板,其中 img 表示图片,num表示获取该图片中颜色的数量
template部分
<template>
<div class="box">
<div class="item" v-for="(item,i) in images" :key="item">
<img :src="item" @mouseenter="handleMouseenter($event.target,i)" @mouseleave="handleMouseleave" :style="{
opacity:hoverIndex === -1?1:i === hoverIndex?1:0.2
}">
</div>
</div>
</template>
script部分:
<script setup>
import ColorThief from 'colorthief'
import { ref } from 'vue'
const colorThief = new ColorThief()
let images = []
for (let i = 1; i < 4; i++) {
images.push(`../src/assets/bj${i}.jpg`)
}
let hoverIndex = ref(-1)
async function handleMouseenter(img, i) {
hoverIndex.value = i
// 得到图片的前三种主要颜色
let colors = await colorThief.getPalette(img, 3)
console.log(img)
console.log(colors)
document.body.style.background = `linear-gradient(to right,rgb(${colors[0]}),rgb(${colors[1]}),rgb(${colors[1]}))`
}
function handleMouseleave() {
hoverIndex.value = -1
document.body.style.background = '#fff'
}
</script>
效果展示:
今日寄语: 热爱的东西,永远不要说放弃!