HTML 캔버스 putImageData() 메서드
예시
아래 코드는 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);
}
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| putImageData() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
putImageData() 메서드는 지정된 ImageData 객체의 이미지 데이터를 캔버스에 다시 넣습니다.
팁: 캔버스의 지정된 사각형에 대한 픽셀 데이터를 복사하는 getImageData() 메서드 에 대해 읽어보십시오 .
팁: 비어 있는 새 ImageData 객체를 생성하는 createImageData() 메서드 에 대해 읽어보십시오 .
자바스크립트 구문
| 자바스크립트 구문: | 컨텍스트 .putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
매개변수 값
| Parameter | Description |
|---|---|
| imgData | Specifies the ImageData object to put back onto the canvas |
| x | The x-coordinate, in pixels, of the upper-left corner of the ImageData object |
| y | The y-coordinate, in pixels, of the upper-left corner of the ImageData object |
| dirtyX | Optional. The horizontal (x) value, in pixels, where to place the image on the canvas |
| dirtyY | Optional. The vertical (y) value, in pixels, where to place the image on the canvas |
| dirtyWidth | Optional. The width to use to draw the image on the canvas |
| dirtyHeight | Optional. The height to use to draw the image on the canvas |
❮ HTML 캔버스 참조