예
복사 아래의 코드 픽셀로 캔버스에 지정된 구형의 데이터 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);
} »그것을 자신을 시도 브라우저 지원
표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.
| 방법 | |||||
|---|---|---|---|---|---|
| getImageData() | 예 | 9.0 | 예 | 예 | 예 |
정의 및 사용
getImageData() 메소드는 imageData의 객체를 반환 복사 캔버스에 지정된 구형의 픽셀 데이터를.
참고 : imageData의 객체가 사진 아니라, 캔버스에 부분 (사각형)을 지정하고, 그 사각형 내부의 모든 픽셀의 정보를 보유하고 있습니다.
imageData의 객체의 모든 픽셀에 대한 정보는 RGBA 값의 네 가지가있다 :
R - (255)에서 붉은 색
G - (255)에서 색상 녹색
B - (255)에서 색상 청색
- 알파 채널 (255에서 0은 투명하고, 255은 완전한 표시됨)
컬러 / 알파 정보는 배열로 유지되고, 저장되는 data imageData의 객체의 속성.
팁 : 배열의 색상 / 알파 정보를 조작 한 후, 당신은으로 캔버스에 다시 이미지 데이터를 복사 할 수 있습니다 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;
에 "그것을 자신을 시도"예를 들어 아래를 참조하십시오!
자바 스크립트 구문
| 자바 스크립트 구문 : | context.getImageData(x,y,width,height); |
|---|
매개 변수 값
| 매개 변수 | 기술 |
|---|---|
| x | 왼쪽 위 모서리의 x (픽셀) 좌표에서 복사를 시작합니다 |
| y | 왼쪽 위 모서리의 y (픽셀) 좌표에서 복사를 시작합니다 |
| width | 복사 할 사각형 영역의 폭 |
| height | 복사 할 사각형 영역의 높이 |
더 예
이미지 사용 :
예
사용 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); »그것을 자신을 시도