vue实现图片取色

Vue 实现图片取色功能

使用 Canvas API 提取颜色

在 Vue 项目中，可以通过 Canvas API 实现图片取色功能。创建一个组件，利用 ref 获取图片元素并绘制到 Canvas 上，通过 getImageData 获取像素数据。

<template>
  <div>
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <canvas ref="canvas" style="display: none;"></canvas>
    <div v-if="dominantColor" :style="{ backgroundColor: dominantColor }">
      主色调: {{ dominantColor }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dominantColor: null
    };
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        this.processImage(e.target.result);
      };
      reader.readAsDataURL(file);
    },
    processImage(imageSrc) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const img = new Image();

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

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        this.dominantColor = this.getDominantColor(imageData);
      };
      img.src = imageSrc;
    },
    getDominantColor(imageData) {
      const colorCount = {};
      let maxCount = 0;
      let dominantColor = '';

      for (let i = 0; i < imageData.length; i += 4) {
        const r = imageData[i];
        const g = imageData[i + 1];
        const b = imageData[i + 2];
        const a = imageData[i + 3];
        const color = `rgba(${r}, ${g}, ${b}, ${a})`;

        colorCount[color] = (colorCount[color] || 0) + 1;
        if (colorCount[color] > maxCount) {
          maxCount = colorCount[color];
          dominantColor = color;
        }
      }

      return dominantColor;
    }
  }
};
</script>

使用第三方库简化操作

对于更复杂的取色需求，可以使用第三方库如 color-thief 或 vibrant.js。这些库提供了更高级的颜色提取功能，如提取调色板或主色调。

安装 color-thief：

npm install colorthief

在 Vue 组件中使用：

<template>
  <div>
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <img ref="image" style="display: none;" />
    <div v-if="palette">
      调色板: 
      <div v-for="(color, index) in palette" :key="index" 
           :style="{ backgroundColor: `rgb(${color.join(',')})`, width: '50px', height: '50px' }">
      </div>
    </div>
  </div>
</template>

<script>
import ColorThief from 'colorthief';

export default {
  data() {
    return {
      palette: null
    };
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        this.$refs.image.src = e.target.result;
        this.extractColors();
      };
      reader.readAsDataURL(file);
    },
    extractColors() {
      const colorThief = new ColorThief();
      const img = this.$refs.image;

      img.onload = () => {
        this.palette = colorThief.getPalette(img, 5);
      };
    }
  }
};
</script>

性能优化建议

对于大尺寸图片，直接处理可能会影响性能。可以通过以下方式优化：

• 缩小图片尺寸后再处理，减少像素数据量。
• 使用 Web Worker 将颜色计算放到后台线程，避免阻塞主线程。
• 对颜色采样时，可以间隔采样而非遍历所有像素，平衡精度和性能。

// 间隔采样示例
getDominantColor(imageData) {
  const colorCount = {};
  let maxCount = 0;
  let dominantColor = '';
  const step = 10; // 每隔10个像素采样一次

  for (let i = 0; i < imageData.length; i += 4 * step) {
    const r = imageData[i];
    const g = imageData[i + 1];
    const b = imageData[i + 2];
    const color = `rgb(${r}, ${g}, ${b})`;

    colorCount[color] = (colorCount[color] || 0) + 1;
    if (colorCount[color] > maxCount) {
      maxCount = colorCount[color];
      dominantColor = color;
    }
  }

  return dominantColor;
}