vue3+ts提取图片颜色代码解析css提取图片主题色功能

在 Vue3 + TypeScript 中提取图片颜色代码和解析 CSS 提取图片主题色的方法与 Vue2 + JavaScript 基本一致，只是需要在 Vue3 的 Composition API 中使用。

1. 如何提取图片颜色代码

可以使用 Vue3 的生命周期函数 onMounted 来实现提取图片颜色代码的功能。具体步骤如下：

1) 在 template 中添加一个 image 元素。

<template>
  <div>
    <img ref="image" src="图片链接" />
  </div>
</template>

2) 在 setup 函数中获取 image 元素，并将图片绘制到 Canvas 上。

import { onMounted } from 'vue';

export default {
  setup() {
    const imageRef = ref(null);

    onMounted(() => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = imageRef.value;

      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
      };
    });

    return {
      imageRef,
    };
  },
};

3) 获取 Canvas 上某个像素的颜色代码。

import { ref } from 'vue';

const pixelData = ctx.getImageData(x, y, 1, 1).data;
const colorCode = '#' + ((1 << 24) + (pixelData[0] << 16) + (pixelData[1] << 8) + pixelData[2]).toString(16).slice(1);

其中 x 和 y 表示像素的坐标，pixelData 是一个长度为 4 的数组，分别表示 RGBA 四个通道的值。将 RGB 三个通道的值拼接成一个 16 进制数，并加上前缀“#”就是颜色代码了。

2. 解析 CSS 提取图片主题色功能

可以使用第三方库 color-thief 来实现解析 CSS 提取图片主题色的功能。具体步骤如下：

1) 安装 color-thief 库。

npm install color-thief --save

2) 在 Vue 组件中引入 color-thief 库。

import ColorThief from 'color-thief';

3) 在 setup 函数中创建一个 Image 元素，并将图片加载到 Image 上。

const colorThief = new ColorThief();
const img = new Image();
img.src = '图片链接';

img.onload = () => {
  const color = colorThief.getColor(img);
  console.log(color);
};

colorThief.getColor(img) 函数的返回值是一个长度为 3 的数组，分别表示 RGB 三个通道的值。将 RGB 三个通道的值拼接成一个 16 进制数，并加上前缀“#”就是图片的主题色了。