Canvas putImageData() 메서드

Canvas 참조 가이드

정의와 사용법

putImageData() 지정된 ImageData 객체에서 이미지 데이터를 캔버스에 다시 배치하는 메서드.

추천:참조 getImageData() 캔버스에서 지정된 사각형의 픽셀 데이터를 복사할 수 있는 메서드.

추천:참조 createImageData() 새로운 빈 ImageData 객체를 생성할 수 있는 메서드.

예제

아래 코드는 getImageData()를 통해 캔버스에서 지정된 사각형의 픽셀 데이터를 복사한 후 putImageData()를 통해 이미지 데이터를 캔버스에 다시 배치합니다:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

직접 시도해보세요

문법

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

파라미터 값

파라미터 설명
imgData 캔버스에 다시 배치할 ImageData 객체를 정의.
x ImageData 객체의 왼쪽 상단角的 x 좌표, 픽셀 단위.
y ImageData 객체의 왼쪽 상단角的 y 좌표, 픽셀 단위.
dirtyX 캔버스에 이미지를 배치하는 위치를 계산하는 수평 값(x), 픽셀 단위.
dirtyY 캔버스에 이미지를 배치하는 위치를 계산하는 수평 값(y), 픽셀 단위.
dirtyWidth 캔버스에 이미지를 그리기 위해 사용되는 너비.
dirtyHeight 캔버스에 이미지를 그리기 위해 사용되는 높이.

브라우저 지원

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

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

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

Canvas 참조 가이드