getImageData

 

ctx.getImageData() 함수는 HTML canvas에서 특정 부분의 이미지 데이터를 추출하는 데 사용됩니다. 이 함수는 canvas 2D 렌더링 컨텍스트(Context)의 메서드 중 하나로, 픽셀 데이터를 포함하는 ImageData 객체를 반환합니다. 이 함수의 파라미터는 다음과 같습니다.

 

• x (number): 데이터를 추출할 사각 영역의 왼쪽 상단 모서리의 x 좌표입니다.
• y (number): 데이터를 추출할 사각 영역의 왼쪽 상단 모서리의 y 좌표입니다.
• width (number): 추출할 사각 영역의 너비입니다. 이 값은 픽셀 단위로 지정하며, 0보다 커야 합니다.
• height (number): 추출할 사각 영역의 높이입니다. 이 값도 픽셀 단위로 지정하며, 0보다 커야 합니다.

 

예를 들어, canvas의 (10, 20) 위치에서 너비 100픽셀, 높이 50픽셀의 영역의 이미지 데이터를 얻고자 할 때는 다음과 같이 사용할 수 있습니다.

 

var imageData = ctx.getImageData(10, 20, 100, 50);

 

 

이렇게 얻은 imageData 객체는 data 속성을 포함하고 있으며, 이는 Uint8ClampedArray 타입의 배열입니다. 이 배열은 RGBA 형식의 픽셀 데이터를 포함하고 있으며, 각 픽셀은 4개의 요소(R, G, B, A)로 구성됩니다. 이를 통해 이미지의 각 픽셀의 색상과 투명도를 알 수 있습니다.