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()	Yes	9.0	Yes	Yes	Yes

정의 및 사용

getImageData() 메서드는 캔버스의 지정된 사각형에 대한 픽셀 데이터를 복사하는 ImageData 객체를 반환합니다.

참고: ImageData 객체는 그림이 아니며 캔버스의 일부(사각형)를 지정하고 해당 사각형 내부의 모든 픽셀에 대한 정보를 보유합니다.

ImageData 객체의 모든 픽셀에는 RGBA 값인 4가지 정보가 있습니다.

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
var i;
for (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);

❮ HTML 캔버스 참조

HTML 참조

HTML Tags