HTML 캔버스 getImageData () 메소드
예
다음 코드 getImageData는 () putImageData에 의해 캔버스에 다시) (이미지 데이터를 캔버스 사각형 지정된 픽셀 데이터에 복사 :
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);
}
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 getImageData () 메소드.
참고 : 8 및 이전이나 인터넷 익스플로러는 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
getImageData () 메소드는 지정된 직사각형 캔버스 화소 데이터의 복사 imageData의 객체를 반환한다.
주 : imageData의 객체 캔버스 (직사각형)의 일부를 제공하는 화상되지 않고, 각 픽셀의 사각형 내에 저장된 정보.
각 픽셀에 대한 객체 imageData의 정보, 즉 RGBA 값의 네 가지 영역이있다 :
R - 빨간색 (255)
G - 그린 (255)
B - 블루 (255)
A - 알파 채널 (0-255 0은 투명, 255은 완전히 볼 수 있습니다)
색상 / 어레이 형태의 알파 정보 imageData의 오브젝트에 저장된 데이터 속성.
팁 : 작업 색상 / 알파 정보의 전체 배열이, 당신이 사용할 수있는 putImageData ()를 이미지 데이터의 방법은 다시 캔버스에 복사됩니다.
예 :
다음 코드를 얻을 수있다 imageData의 객체는, 제 1 픽셀 색상 / 알파 정보에 반환된다 :
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
팁 : 캔버스 화상의 각 화소의 색상을 반전 getImageData () 메소드를 사용할 수있다.
모든 픽셀을 통해이 공식을 사용하여 색상 값을 변경 :
green=255-old_green;
blue=255-old_blue;
다음 "시도"예를 좀 봐!
자바 스크립트 구문
| 자바 스크립트 구문 : | 컨텍스트 .getImageData (X, Y, 폭, 높이); |
|---|
매개 변수 값
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标（以像素计）。 |
| y | 开始复制的左上角位置的 y 坐标（以像素计）。 |
| width | 要复制的矩形区域的宽度。 |
| height | 要复制的矩形区域的高度。 |
더 많은 예제
이미지는 사용할 :
예
캔버스 화상의 각 화소의 색상을 반전 getImageData ()을 사용하여
자바 스크립트 :
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);
»시도