在Vue3+Vite+TypeScript中使用colorthief

1. 引言

1.1 关于colorthief

colorthief是一个用于从图像中提取主要颜色的JavaScript库。它通过分析图像的像素来确定图像中最具代表性的颜色。主要用途是在网页开发中，根据图像的主要颜色来创建吸引人的界面或者为用户提供更好的交互体验。

1.2 本文目的

通过本文，您将学习在基于vue3+vite+typescript使用colorthief的流程。并在应用过程中所产生问题获得解决办法。

2.安装与导入

在开始使用colorthief之前，首先需要进行安装并将其导入到您的项目中。下面是安装、导入colorthief以及对过程中发生的几个问题分析与解决的简要说明。

2.1 安装

执行下面这行命令，在项目中添加colorthief

npm i --save colorthief

2.2 导入

const ColorThief = require('colorthief');

2.2.1 问题1

• 现象：当我们按照官方文档的方式导入时，运行项目后，控制台会报错：Uncaught (in promise) ReferenceError: require is not defined
• 原因：这是由于Vite 使用ES模块作为默认的模块系统，并没有内置对CommonJS 的支持。
• 解决：改为ES模块导入方式

import colorthief from 'colorthief';

2.2.2 问题2

• 现象：但是当修改导入方式之后，会发现代码会报错：无法找到模块“colorthief”的声明文件。
• 原因：在typescript中使用colorthief时， 由于colorthief并没有@types/colorthief, 所以需要我们自行添加声明文件。
• 解决：在项目根目录，创建colorthief.d.ts，添加类型声明即可。

declare module "colorthief" {
  export type RGBColor = [number, number, number];
  export default class ColorThief {
    getColor: (
      img: HTMLImageElement | null,
      quality: number = 10
    ) => RGBColor | null;

    getPalette: (
      img: HTMLImageElement | null,
      colorCount: number = 10,
      quality: number = 10
    ) => RGBColor[] | null;
  }
}

3. ColorThief主要方法介绍

colorThief主要提供了两个方法，即getColor和getPalette。

3.1 getColor：用于获取图像中的主要颜色。

参数

• image: （必需）：要分析的图像。可以是一个 <img> 元素或者一个图片的URL。
• quality（可选）：指定采样的质量。取值范围是1到10之间的整数，默认为10。数值越高，采样的像素数量越多，分析的结果也就更加准确，但同时也会增加计算时间。

返回值：

• 返回一个包含RGB颜色值的数组，数组的格式为[r, g, b]。这个颜色是图像中最具代表性的颜色，即主要颜色。

3.2 getPalette：获取图像中的调色板，即一组主要的颜色。

参数：

• image: （必需）：要分析的图像。可以是一个 <img> 元素或者一个图片的URL。
• colorCount（可选）：指定要获取的颜色数量。默认为10。ColorThief将从图像中提取最具代表性的颜色，数量由 colorCount 参数指定。
• quality（可选）：指定采样的质量。取值范围是1到10之间的整数，默认为10。数值越高，采样的像素数量越多，分析的结果也就更加准确，但同时也会增加计算时间。

返回值：

• 返回一个包含多个RGB颜色值数组的调色板，每个数组的格式为[r, g, b]。数组的长度等于 colorCount 参数指定的颜色数量。

4. 应用实例

以下是一个基于Vue 3 + Vite + TypeScript的示例代码，使用Tailwind CSS编写样式，并使用colorThief获取主色，实现了一个简单的效果。

4.1 实现效果

当鼠标移入图片时，图片会放大，同时页面背景色会变为图片的主色；当鼠标移出图片时，图片会恢复原来的大小，同时背景色会重置。

4.2 实现步骤：

1. 使用@mouseenter和@mouseleave事件监听来模拟鼠标的hover操作。
2. 使用colorThief的getColor方法获取图片的主色，并在鼠标移入时将页面背景色设置为该主色。
3. 在鼠标移出时，将页面背景色重置，同时图片恢复原来的大小。

4.3 示例代码

<template>
  <div class="flex items-center justify-center h-full transition-all" :style="{ backgroundColor: primaryColor }">
    <img :src="avatar" class="w-[300px] h-[300px] transition-all shadow-2xl rounded-xl hover:scale-110"
      @mouseenter="onMouseEnter($event)" @mouseleave="onMouseLeave()">
  </div>
</template>

<script setup lang='ts'>
import avatar from '@/assets/img/avatar.jpg';
import colorthief from 'colorthief';
import { ref } from 'vue';

const ColorThief = new colorthief();
const primaryColor = ref<string>('#fff'); // 主色：默认为白色

// 鼠标移入事件
const onMouseEnter = async (event: MouseEvent) => {
  const img = event.target as HTMLImageElement;
  if (img) {
    const rgb: [number, number, number] | null = ColorThief.getColor(img, 1);
    if (rgb) {
      const [red, green, blue] = rgb;
      // 设置主色
      primaryColor.value = `rgb(${red}, ${green}, ${blue})`;
    }
  }
}

// 鼠标移出事件
const onMouseLeave = () => {
  primaryColor.value = '#fff'; // 主色：重置为白色
}
</script>

鼠标移入前：

鼠标移入后：

5. 参考

• ColorThief 仓库：https://github.com/lokesh/color-thief
• ColorThief 首页：https://lokeshdhakar.com/projects/color-thief/

6. 结尾

希望本文能够帮助您更深入地了解colorThief，并在您的项目中发挥潜力。期待看到您在未来的创作中运用colorThief创造出更加精彩的作品！如有任何疑问或想法，欢迎随时留言分享。感谢您的阅读！