用vue+canvas读取图片的颜色值

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

---

写在前面

本文用vue+canvas实现读取图片的颜色值。

代码块

代码说明

1. 创建一个canvas画布（id="Canvas"），一个存储鼠标滑过的颜色值的div（id="hoveredColor"），一个存储鼠标点击的颜色值的div（id="selectedColor"）

  <div class="wrap">
    <canvas id="Canvas" width="500" height="500"></canvas>
    <div>
      <h3>鼠标滑过的颜色值：</h3>
      <div id="hoveredColor"></div>
      <h3>鼠标点击的颜色值：</h3>
      <div id="selectedColor"></div>
    </div>
  </div>

2. 画布绘制图片

绘制的图片需要允许跨域（crossOrigin = "anonymous"），否则会报错。

let img = new Image();
img.crossOrigin = "anonymous"; // 图片允许跨域，否则不能拿到图片的数据
img.src =
"https://img2.baidu.com/it/u=3744598050,4191464688&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1663866000&t=dd6c54f6994c9a937449567225badfed";

const canvas = document.getElementById("Canvas");
this.ctx = canvas.getContext("2d");
img.onload = () => {
  // canvas绘制图片 ctx.drawImage(图片, x位置, y位置，图片宽度，图片高度)
  this.ctx.drawImage(img, 0, 0, 500, 500);
  // 图片设置成隐藏
  img.style.display = "none"; // 只显示canvas绘制的图片，不显示img图片
};

3. 添加鼠标滑过和鼠标点击事件

  const hoveredColor = document.getElementById("hoveredColor"); // 鼠标滑过对象
  const selectedColor = document.getElementById("selectedColor"); // 鼠标点击对象

  // 鼠标滑过事件绑定
  canvas.addEventListener("mousemove", (event) => {
    this.pick(event, hoveredColor);
  });
  // 鼠标点击事件绑定
  canvas.addEventListener("click", (event) => {
    this.pick(event, selectedColor);
  });

4. 鼠标滑过和鼠标点击事件触发方法

pick(event, des) {
  const x = event.offsetX; // 相对于canvas的鼠标的x位置
  const y = event.offsetY; // 相对于canvas的鼠标的y位置
  
  // ctx.getImageData(left, top, width, height);
  // 获得画布内【 (left, top), (left + width, top), (left, top + height), (left + width, top + height)】像素数据的 ImageData 对象
  const pixel = this.ctx.getImageData(x, y, 1, 1);
  const data = pixel.data;

  const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
  des.style.background = rgba; // 设置对象的背景颜色
  des.textContent = rgba; // 设置对象的文本内容

  return rgba;
},

最终效果：

写在最后

以上即所有代码，参考js：像素操作