vue3&TS中使用 colorthief 实现背景色随着当前图片变化

前言

今天发现个有意思的库colorthief, 它可以获取到图片或者svg中主要的颜色以及辅色,上手简单使用了一下发现挺有意思,于是决定写个3D轮播 ,根据当前轮播图片来改变背景色。技术栈依然是使用 vue3 + ts。这里贴一个项目源码以及项目预览,感兴趣的可以下载源码看看或者去看看效果预览,想自己动手试试的可以跟着我实现一遍效果

项目初期搭建

sql 复制代码
npm create vue@latest
npm i colorthief

根据提示结合自身习惯创建项目即可,接着简单的清理一下初始无用的代码,就可以开始准备写代码了

colorthief 简单介绍

colorthief 翻译过来就是颜色小偷,其作用就是获取图片或者svg中的颜色点,并罗列出来,它支持浏览器环境以及node环境,这里我们只介绍浏览器环境,在浏览器环境中使用非常简单, 导入 colorthief 后实例化即可, 有两个实例方法,getColor & getPalette

getColor接受两个参数,第一个是图像元素,第二个是质量(质量是一个可选参数,必须是值 1 或更大的整数,默认为 10。该数字决定在采样下一个像素之前跳过多少像素。我们很少需要对图像中的每个像素进行采样才能获得良好的结果。数字越大,返回值的速度越快)

getPalette接受三个参数,第一个是图像元素,第二个是颜色计数,第三个是质量

在项目中使用 colorthief

在TS中使用colorthief的话, 由于colorthief并没有@types/colorthief, 所以需要我们自己写声明文件, 在根目录下创建colorthief.d.ts:

typescript 复制代码
// colorthief.d.ts

declare module 'colorthief' {
  class ColorThief {
    constructor()
    getColor(sourceImage: HTMLImageElement, quality?: number): Promise<[number, number, number]>
    getPalette(
      sourceImage: HTMLImageElement,
      colorCount?: number,
      quality?: number
    ): Promise<[number, number, number][]>
  }

  export default ColorThief
}

这样就声明好了,接着就可以愉快的去使用了,首先构建一个轮播组件, 轮播没啥好说的, 基本上前端都会写,这里不多赘述了,图片来源可以是本地图片,我使用了图片api:picsum 每次请求都是一张不同的图片,关于picsum的使用可以点击去官网看看说明,很简单这里也不多说了, 轮播和图片准备就绪之后,就可以开始使用 colorthief 了。

javascript 复制代码
import ColorThief from 'colorthief'

const colorthief = new ColorThief()

实例化之后就可以调用实例方法了, 上面两个实例方法都简单的介绍过了,这里不多赘述, 关于必传参数的image元素, 可以通过ref来传值, 这样就能获得一个数组,这个数组就是 rgb的三个值,getColorgetPalette 的区别就在于获取几个颜色,如果你想获取多个颜色,就使用getPalette,这两个方法都会返回一个 Promise , 我们可以这样来获取他们的返回值

ini 复制代码
colorthief.getColor(ImageRef).then(res=>{
  console.log(res)
})

拿到返回值改变元素背景即可, 这一步还是很简单的,以上就是colorthief的全部使用了。

结尾

如果对3D轮播感兴趣的可以留言让我可以写一篇介绍它的实现,也可以自己拿到源码下载看看具体的实现

相关推荐
牧杉-惊蛰1 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience2 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
CoderYanger2 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
LuckySusu2 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js
LuckySusu2 小时前
【vue篇】React vs Vue:2025 前端双雄终极对比
前端·vue.js
蓝胖子的多啦A梦3 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动