HTML 캔버스 createImageData() 메서드
예시
모든 픽셀이 빨간색인 100*100픽셀 ImageData 개체를 만들고 캔버스에 넣습니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 255;
imgData.data[i+1] = 0;
imgData.data[i+2] = 0;
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 10);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
createImageData() 메서드는 비어 있는 새 ImageData 객체를 만듭니다. 새 개체의 픽셀 값은 기본적으로 투명한 검정색입니다.
ImageData 객체의 모든 픽셀에는 RGBA 값인 네 가지 정보가 있습니다.
R - 빨간색(0-255에서)
G - 녹색(0-255에서)
B - 파란색(0-255에서)
A - 알파 채널(0-255에서, 0은 투명하고 255는 투명) 완전히 볼 수 있음)
따라서 투명한 검정색은 (0,0,0,0)을 나타냅니다.
색상/알파 정보는 배열에 보관되며 배열에는 모든 픽셀에 대해 4개의 정보가 포함되어 있으므로 배열의 크기는 ImageData 개체 크기의 4배인 너비*높이*4입니다. (배열의 크기를 찾는 더 쉬운 방법은 ImageDataObject.data.length를 사용하는 것입니다)
색상/알파 정보를 포함하는 배열 은 ImageData 객체 의 data 속성에 저장됩니다.
팁: 배열의 색상/알파 정보를 조작한 후에는 putImageData() 메서드 를 사용하여 이미지 데이터를 다시 캔버스에 복사할 수 있습니다 .
예:
ImageData 객체의 첫 번째 픽셀을 빨간색으로 만드는 구문:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
ImageData 객체의 두 번째 픽셀을 녹색으로 만드는 구문:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
자바스크립트 구문
createImageData() 메서드에는 두 가지 버전이 있습니다.
1. 이렇게 하면 지정된 치수(픽셀 단위)로 새 ImageData 객체가 생성됩니다.
| 자바스크립트 구문: | var imgData= 컨텍스트 .createImageData( 너비, 높이 ); |
|---|
2. 이것은 anotherImageData에 의해 지정된 객체와 같은 차원을 가진 새로운 ImageData 객체를 생성합니다(이것은 이미지 데이터를 복사하지 않습니다):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
매개변수 값
| Parameter | Description |
|---|---|
| width | The width of the new ImageData object, in pixels |
| height | The height of the new ImageData object, in pixels |
| imageData | anotherImageData object |
❮ HTML 캔버스 참조