마우스 이동 시 캔버스에서 픽셀 색상 가져오기

개요

이 게시물에서는 마우스 커서 아래에 있는 픽셀의 RGB 값을 검색하는 방법을 살펴봅니다. 캔버스 요소 위로 이동합니다. 자체 포함된 예제를 통해 포괄적인 접근 방식을 제공하겠습니다.

해결책

이를 달성하려면 먼저 원하는 크기로 캔버스를 만듭니다.

정사각형과 같은 요소로 캔버스를 채우세요:

const example = document.getElementById('example');
const ctx = example.getContext('2d');

ctx.fillStyle = randomColor();
ctx.fillRect(0, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(55, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(110, 0, 50, 50);

마지막으로 커서 위치의 픽셀 값을 캡처하는 mousemove 이벤트 핸들러를 추가합니다.

$('#example').mousemove(function(e) {
  // Calculate the position relative to the canvas
  const pos = findPos(this);
  const x = e.pageX - pos.x;
  const y = e.pageY - pos.y;
  const coord = `x=${x}, y=${y}`;

  // Get the pixel value
  const c = this.getContext('2d');
  const p = c.getImageData(x, y, 1, 1).data;

  // Convert to hex format
  const hex = "#"   ("000000"   rgbToHex(p[0], p[1], p[2])).slice(-6);

  // Display the color information
  $('#status').html(coord   "
"   hex);
});

유틸리티 함수

이 코드는 요소의 위치를 ​​찾고 RGB 값을 16진수로 변환하는 지원 함수에 의존합니다. 이러한 함수를 다음과 같이 정의합니다.

function findPos(obj) {
  let curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft  = obj.offsetLeft;
      curtop  = obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255) throw "Invalid color component";

  return ((r << 16) | (g << 8) | b).toString(16);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
  return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`;
}

라이브 예시

전체 예시를 보려면 다음 링크를 방문하세요.

https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203