HTML 캔버스(Canvas)에서 특정 픽셀의 색상 값 가져오기

캔버스에서 픽셀 색상 추출하기

HTML5 캔버스에서 특정 좌표의 픽셀 색상을 가져오려면 getImageData() 메서드로 이미지 데이터를 먼저 얻은 후, 원하는 좌표에 해당하는 인덱스를 계산하여 RGBA 값을 읽어내면 됩니다.

픽셀 인덱스 계산 공식

캔버스의 이미지 데이터는 각 픽셀마다 빨강(R), 초록(G), 파랑(B), 알파(A) 네 개의 값이 순서대로 저장됩니다. 따라서 x, y 좌표의 픽셀 위치는 다음과 같이 계산합니다.

var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4;

여기서 Math.floor()를 사용하는 이유는 좌표가 소수일 경우 정수로 변환해야 정확한 픽셀 위치를 찾을 수 있기 때문입니다. 곱하기 4는 픽셀당 4개의 색상 채널(RGBA)이 저장되어 있기 때문입니다.

RGBA 색상 값 읽기

계산된 인덱스를 기준으로 각 채널의 값을 다음과 같이 가져올 수 있습니다.

// rgba 형식의 색상 값
var r = data[index];      // 빨강 (Red)
var g = data[index + 1];  // 초록 (Green)
var b = data[index + 2];  // 파랑 (Blue)
var a = data[index + 3];  // 알파 (투명도)

전체 예제 코드

실제 동작하는 전체 코드 예시는 다음과 같습니다.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 이미지 데이터 가져오기
var imageData = ctx.getImageData(x, y, 1, 1);
var data = imageData.data;

// 해당 좌표의 픽셀 색상 출력
console.log('R: ' + data[0] + ', G: ' + data[1] + ', B: ' + data[2] + ', A: ' + data[3]);

주의 사항

캔버스에 외부 이미지를 불러온 경우 CORS(교차 출처 리소스 공유) 정책으로 인해 getImageData() 호출 시 보안 오류가 발생할 수 있습니다. 이 경우 이미지 서버에서 적절한 CORS 헤더를 설정하거나, 이미지 요소에 crossOrigin 속성을 지정해야 합니다.