HTML 캔버스 putImageData() 메서드

HTML5 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> 요소를 지원하지 않습니다.

HTML5 Canvas 참조 가이드