html5-canvas
「getImageData」및 「putImageData」를 사용한 픽셀 조작

"context.getImageData"소개

Html5 Canvas는 캔버스에있는 모든 픽셀의 색상을 가져오고 변경할 수있는 기능을 제공합니다.

Canvas의 픽셀 조작을 사용하여 다음을 수행 할 수 있습니다.

• 이미지의 색상 선택 도구를 만들거나 색상환에서 색상을 선택하십시오.
• 흐리게 처리 및 가장자리 감지와 같은 복잡한 이미지 필터를 만듭니다.
• 픽셀 수준에서 이미지의 모든 부분을 다시 칠하십시오 (HSL을 사용하는 경우 중요한 조명 및 채도를 유지하면서 이미지를 다시 칠하기조차 할 수 있으므로 결과가 누군가 이미지 위에 페인트 칠을 한 것처럼 보일 수 있습니다). 참고 : 이제 캔버스에 블렌드 합성 기능이 추가되어 일부 경우 이미지를 다시 칠할 수도 있습니다.
• 이미지의 사람 / 항목 주변의 배경을 "녹아웃"
• 이미지의 일부를 채우고 채우기 위해 페인트 통 도구를 만듭니다 (예 : 사용자가 클릭 한 꽃잎의 색상을 녹색에서 노란색으로 변경).
• 이미지 (예 : 얼굴 인식)를 검사하십시오.

일반적인 문제 :

• 보안상의 이유로 getImageData 는 웹 페이지 자체가 아닌 다른 도메인에서 가져온 이미지를 그린 경우 비활성화됩니다.
• getImageData 는 대형 픽셀 데이터 배열을 만들고 GPU를 사용하지 않기 때문에 상대적으로 비용이 많이 드는 메서드입니다. 주 : 이제 Canvas는 getImageData 와 동일한 픽셀 조작을 수행 할 수있는 혼합 합성 기능을 제공합니다.
• .png 이미지의 경우 getImageData 는 캔버스에서 이미지를 그릴 때 브라우저가 감마 보정 및 알파 미리 곱하기를 수행 할 수 있기 때문에 원본 .png 파일과 완전히 동일한 색상을보고하지 않을 수 있습니다.

픽셀 색상 얻기

getImageData 를 사용하여 캔바스 내용 전체 또는 일부의 픽셀 색상을 가져옵니다.

getImageData 메소드는 imageData 객체를 리턴합니다.

imageData 객체에는 픽셀 색상 정보가 들어있는 .data 속성이 있습니다.

data 속성은 요청 된 모든 픽셀에 대해 빨강, 녹색, 파랑 및 알파 (불투명도) 색상 데이터가 포함 된 Uint8ClampedArray 입니다.

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

다음과 같이 data 배열 내의 임의의 [x, y] 픽셀의 위치를 ​​얻을 수 있습니다.

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

그런 다음 픽셀의 빨강, 녹색, 파랑 및 알파 값을 다음과 같이 가져올 수 있습니다.

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

픽셀 데이터 배열의 구조를 보여주는 그림

context.getImageData 는 작은 2x3 픽셀 크기의 캔버스에 대해 아래에 나와 있습니다.