예
카피 아래 코드 화소와 캔버스에 지정된 사각형 데이터 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
getImageData() 메소드는 imageData의 객체를 반환 복사 캔버스에 지정된 사각형의 픽셀 데이터.
Note: imageData의 객체가 그림없고, 그 일부를 지정 (rectangle) 캔버스를 그 사각형 안에있는 모든 화소의 정보를 보유하고있다.
imageData의 개체 화소마다 내용 RGBA 값의 네 가지가있다 :
R - 붉은 색 (from 0-255)
G - 색상 녹색 (from 0-255)
B - 색상 블루 (from 0-255)
A - 알파 채널 (from 0-255; 0 is transparent and 255 is fully visible)
컬러 / 알파 정보는 배열로 유지되고, 저장되는 데이터 imageData의 객체의 속성.
Tip: 당신이 배열의 색상 / 알파 정보를 조작 한 후, 당신은으로 캔버스에 다시 영상 데이터를 복사 할 수 있습니다 putImageData() 방법.
Example:
반환 된 imageData의 객체의 제 1 픽셀의 색상 / 알파 정보를 얻기위한 코드 :
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tip: 당신은 또한 사용할 수 있습니다 getImageData() 캔버스에 이미지의 모든 픽셀의 색상을 반전하는 방법.
모든 화소에 대해 반복 변경이 식을 이용하여 컬러 값 :
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
A의 아래를 참조하십시오 "Try it Yourself" 예!
자바 스크립트 구문
| 자바 스크립트 구문 : | context . getImageData( x,y,width,height ) ; |
|---|
매개 변수 값
| 매개 변수 | 기술 |
|---|---|
| x | x 좌표 (in pixels) 좌상 코너는 복사를 시작 |
| y | y 방향 좌표 (in pixels) 좌상 코너는 복사를 시작 |
| 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); »그것을 자신을 시도 <캔버스 개체