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的三个值，getColor 和 getPalette 的区别就在于获取几个颜色，如果你想获取多个颜色，就使用getPalette，这两个方法都会返回一个 Promise ，我们可以这样来获取他们的返回值

ini 复制代码

colorthief.getColor(ImageRef).then(res=>{
  console.log(res)
})

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

结尾

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