Vue3中实现点击图片获取图片颜色

上传一张图片，点击图片的某个位置，获取点击位置图片的 16 进制颜色

下面是具体的实现代码

<template>
  <div class="apps">
    <img ref="image" src="./image.jpg" @click="getColor">
    <div :style="{ backgroundColor: color }" class="color-box"></div>
  </div>
</template>

<script setup>
  import { ref, getCurrentInstance } from 'vue';
  const color = ref('');
  const currentInstance = getCurrentInstance();
  const getColor = (e) => {
    // 获取图片元素
    const image = currentInstance.ctx.$refs.image;
    // 创建canvas元素
    const canvas = document.createElement('canvas');
    // 获取canvas绘图上下文
    const ctx = canvas.getContext('2d');
    // 设置canvas尺寸
    canvas.width = image.width;
    canvas.height = image.height;
    // 绘制图片到canvas中
    ctx.drawImage(image, 0, 0);
    // 获取鼠标点击的坐标
    const x = e.offsetX;
    const y = e.offsetY;
    // 获取canvas中的图片数据
    const data = ctx.getImageData(x, y, 1,1).data;
    // 计算颜色值
    const colorArr = [0, 0, 0];
    for (let i = 0; i < data.length; i += 4) {
      colorArr[0] += data[i];
      colorArr[1] += data[i + 1];
      colorArr[2] += data[i + 2];
    }
    colorArr[0] = Math.round(colorArr[0] / (data.length / 4));
    colorArr[1] = Math.round(colorArr[1] / (data.length / 4));
    colorArr[2] = Math.round(colorArr[2] / (data.length / 4));
    // 设置颜色值为响应式数据
    color.value = `rgb(${colorArr[0]}, ${colorArr[1]}, ${colorArr[2]})`;
  }
</script>

<style scoped lang="less">
.color-box {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
</style>