HTML 캔버스 getImageData() 메서드
예시
아래 코드는 getImageData()를 사용하여 캔버스의 지정된 사각형에 대한 픽셀 데이터를 복사한 다음, putImageData()를 사용하여 이미지 데이터를 다시 캔버스에 넣습니다.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
getImageData() 메서드는 캔버스의 지정된 사각형에 대한 픽셀 데이터를 복사하는 ImageData 객체를 반환합니다.
참고: ImageData 객체는 그림이 아니며 캔버스의 일부(사각형)를 지정하고 해당 사각형 내부의 모든 픽셀에 대한 정보를 보유합니다.
ImageData 객체의 모든 픽셀에는 RGBA 값인 네 가지 정보가 있습니다.
R - 빨간색(0-255에서)
G - 녹색(0-255에서)
B - 파란색(0-255에서)
A - 알파 채널(0-255에서, 0은 투명하고 255는 투명) 완전히 볼 수 있음)
색상/알파 정보는 배열에 저장되며 ImageData 객체 의 data 속성에 저장됩니다.
팁: 배열의 색상/알파 정보를 조작한 후에는 putImageData() 메서드 를 사용하여 이미지 데이터를 다시 캔버스에 복사할 수 있습니다 .
예시:
반환된 ImageData 객체에서 첫 번째 픽셀의 색상/알파 정보를 가져오는 코드:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
팁: getImageData() 메서드를 사용하여 캔버스에 있는 이미지의 모든 픽셀 색상을 반전시킬 수도 있습니다.
다음 공식을 사용하여 모든 픽셀을 반복하고 색상 값을 변경합니다.
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
"Try it Yourself" 예제는 아래를 참조하십시오!
자바스크립트 구문
| 자바스크립트 구문: | 컨텍스트 .getImageData( x, y, 너비, 높이 ); |
|---|
매개변수 값
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
더 많은 예
사용할 이미지:
예시
getImageData()를 사용하여 캔버스에 있는 이미지의 모든 픽셀 색상을 반전합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255-imgData.data[i];
imgData.data[i+1] = 255-imgData.data[i+1];
imgData.data[i+2] = 255-imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
❮ 캔버스 개체