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

相关推荐
洪洪呀17 分钟前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
萌萌哒草头将军8 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中8 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊9 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿9 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
敲厉害的燕宝9 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
珠峰下的沙砾9 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*10 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n10 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5