HTML 캔버스 getImageData() 메서드

HTML5 Canvas 참조 설명서

정의와 사용법

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

ImageData 객체의 각 픽셀에는 RGBA 값으로 존재하는 네 가지 정보가 있습니다：

  • R - 빨간색 (0-255)
  • G - 녹색 (0-255)
  • B - 파란색 (0-255)
  • A - alpha 채널 (0-255; 0은 투명하며, 255是完全可见的)

color/alpha는 배열 형태로 존재하여 ImageData 객체의 data 속성을 사용할 수 있습니다。

提示：color/alpha 정보를 배열에서 처리한 후, 다음과 같은 putImageData() 이 메서드는 이미지 데이터를 캔버스에 복사합니다。

예제：

다음 코드는 반환된 ImageData 객체의 첫 번째 픽셀의 color/alpha 정보를 얻을 수 있습니다：

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;

（请见下面的“亲自试一试”实例。）

实例

例子 1

下面的代码通过 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);
}

직접 시도해 보세요

提示：页面底部提供更多实例。

语法

var imgData=context.getImageData(x,y,width,height);

参数值

参数 描述
x 开始复制的左上角位置的 x 坐标。
y 开始复制的左上角位置的 y 坐标。
width 将要复制的矩形区域的宽度。
height 将要复制的矩形区域的高度。

更多实例

예제 2

사용할 이미지:

튜플

getImageData() 사용하여 캔버스 상의 각 픽셀의 색상을 반전합니다.

您的 브라우저는 HTML5 canvas 태그를 지원하지 않습니다.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 색상 반전
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);

직접 시도해 보세요

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

HTML5 Canvas 참조 설명서