HTML 캔버스 createImageData() 메서드
예시
모든 픽셀이 빨간색인 100*100픽셀 ImageData 개체를 만들고 캔버스에 넣습니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
for (var 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
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 |
❮ 캔버스 개체