Latest web development tutorials

HTML 캔버스 getImageData () 메소드

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서

예

다음 코드 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);
}

»시도

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 getImageData () 메소드.

참고 : 8 및 이전이나 인터넷 익스플로러는 <캔버스> 요소를 지원하지 않습니다.

정의 및 사용

getImageData () 메소드는 지정된 직사각형 캔버스 화소 데이터의 복사 imageData의 객체를 반환한다.

주 : imageData의 객체 캔버스 (직사각형)의 일부를 제공하는 화상되지 않고, 각 픽셀의 사각형 내에 저장된 정보.

각 픽셀에 대한 객체 imageData의 정보, 즉 RGBA 값의 네 가지 영역이있다 :

R - 빨간색 (255)
G - 그린 (255)
B - 블루 (255)
A - 알파 채널 (0-255 0은 투명, 255은 완전히 볼 수 있습니다)

색상 / 어레이 형태의 알파 정보 imageData의 오브젝트에 저장된 데이터 속성.

팁 : 작업 색상 / 알파 정보의 전체 배열이, 당신이 사용할 수있는 putImageData ()를 이미지 데이터의 방법은 다시 캔버스에 복사됩니다.

예 :

다음 코드를 얻을 수있다 imageData의 객체는, 제 1 픽셀 색상 / 알파 정보에 반환된다 :

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;

다음 "시도"예를 좀 봐!

자바 스크립트 구문

자바 스크립트 구문 : 컨텍스트 .getImageData (X, Y, 폭, 높이);

매개 변수 값

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

예

더 많은 예제

이미지는 사용할 :

절규

예

캔버스 화상의 각 화소의 색상을 반전 getImageData ()을 사용하여

YourbrowserdoesnotsupporttheHTML5canvastag.

자바 스크립트 :

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);

»시도

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서