实现背景跟随图片变化

实现这个功能，用到了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>

效果展示：

今日寄语： 热爱的东西，永远不要说放弃！