HTML5 canvas context getImageData

canvas상의 이미지를 픽셀단위의 array로 반환한다.

반환값

• 각 픽셀은 네 개의 1바이트 값(적색, 녹색, 파란색, 알파, 순서대로 "RGBA" 형식)으로 표현
• 각 색상 구성요소는 0 ~ 255 사이의 정수로 표시
• 각 구성요소는 배열 내에서 연속적인 색 바이트 값이 할당되며, 최상단 좌측 픽셀의 빨간색 구성요소는 배열 내의 인덱스 0에 위치
• 픽셀은 배열 전체에 걸쳐 왼쪽에서 오른쪽으로, 그 다음 아래로 진행
• 높이 × 너비 × 4바이트를 포함합니다. 배열의 인덱스 번호는 0부터 (높이 × 너비 × 4바이트) – 1까지 의 범위

예제 함수

• 특정 offset의 RGBA 값 확인하기

getRBG = function(x, y) {
    var offset = imgWidth * y + x;
    return {
        red:     data[offset * 4],
        green:   data[offset * 4 + 1],
        blue:    data[offset * 4 + 2],
        opacity: data[offset * 4 + 3]
    };
}