HTML 캔버스 createImageData() 메서드

HTML5 Canvas 참조 매뉴얼

정의와 사용법

createImageData() 새로운 빈 ImageData 객체를 생성하는 메서드. 새 객체의 기본 픽셀 값은 투명한 검은색입니다.

ImageData 객체의 각 픽셀에 대해, RGBA 값이 네 가지 정보가 있습니다:

  • R - 레드 (0-255)
  • G - 그린 (0-255)
  • B - 블루 (0-255)
  • A - 알파 채널 (0-255; 0은 투명하고, 255는 완전히 보이는 것)

따라서, 투명한 검은색은 (0,0,0,0)를 의미합니다。

color/alpha는 배열 형태로 존재하며, 각 픽셀에 대한 네 가지 정보를 포함하기 때문에 배열의 크기는 ImageData 객체의 네 배입니다。（ImageDataObject.data.length를 사용하는 것은 더 간단한 방법입니다）

color/alpha 정보를 포함한 배열은 ImageData 객체의 data 속성 중에서。

푸터 힌트：color/alpha 정보를 배열에서 처리한 후, 다음을 사용할 수 있습니다： 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;

인스턴스

100*100 픽셀의 ImageData 객체를 생성하고, 각 픽셀을 빨간색으로 설정한 후 그림에 추가하세요：

您的浏览器不支持HTML5 canvas 태그。

JavaScript:

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);

본인이 직접 시도해 보세요

문법

有两个版本的 createImageData() 方法：

1. 지정된 크기(픽셀 기준)로 새로운 ImageData 객체를 생성합니다:

var imgData=context.createImageData(width,height);

2. 지정된 크기(픽셀 기준)와 같은 새로운 ImageData 객체를 생성합니다(이미지 데이터를 복사하지 않습니다):

var imgData=context.createImageData(imageData);

파라미터 값

파라미터 설명
width ImageData 객체의 너비(픽셀 기준).
height ImageData 객체의 높이(픽셀 기준).
imageData 또 다른 ImageData 객체.

브라우저 지원

표에서는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

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 참조 매뉴얼