IT용어위키



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]
    };
}

  출처: 공대위키(공대위키에서 최신 문서 보기)
  * 본 페이지는 공대위키에서 미러링된 페이지입니다. 일부 오류나 표현의 누락이 있을 수 있습니다. 원본 문서는 공대위키에서 확인하세요!