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轮播感兴趣的可以留言让我可以写一篇介绍它的实现,也可以自己拿到源码下载看看具体的实现

相关推荐
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路2 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
Savior`L2 小时前
CSS知识复习4
前端·css
我要让全世界知道我很低调3 小时前
记一次 Vite 下的白屏优化
前端·css
1undefined23 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck4 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598244 小时前
vue3源码解析:依赖收集
前端·vue.js
张志鹏PHP全栈5 小时前
TypeScript 第三天,TypeScript中的类型(二)
typescript