픽셀 데이터를 기본 형식으로 가져오는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
여기서는 BitmapDecoder 개체를 사용하여 이미지에서 픽셀 데이터를 가져오는 방법을 보여 줍니다. 픽셀은 바이트 배열로 패키지에 포함되며, BitmapDecoder 개체는 사용할 최적 형식을 자동으로 선택합니다.
BitmapDecoder는 이미지에 대한 최적 픽셀 형식을 자동으로 결정하고 픽셀 데이터를 해당 형식으로 제공할 수 있습니다. 따라서 채널당 8비트 이상의 정밀도를 지원하는 JPEG-XR과 같은 형식으로 저장된 이미지를 로드할 경우 유용합니다. BitmapDecoder가 최적의 픽셀 형식을 결정하도록 하는 경우에는 런타임 시 이미지가 디코드될 때 결정되는 픽셀 형식과 알파 모드의 모든 가능한 조합을 감지 및 처리해야 합니다.
참고
픽셀 데이터를 특정 형식으로 가져오려면, 픽셀 데이터를 특정 형식으로 가져오는 방법을 참조하세요.
알아야 할 사항
기술
사전 요구 사항
- JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 빌드를 참조하세요.
- BitmapDecoder 개체가 있습니다. 이미지를 디코드하는 방법에서 이 개체를 만드는 과정을 안내합니다.
지침
단계 1: 디코더 개체 가져오기
BitmapDecoder 개체를 받는 함수의 시작 부분을 작성하고 관련 속성을 저장할 변수를 선언합니다.
function DecodeDefaultPixels(decoder) {
디코더를 사용하면 픽셀 데이터에 액세스할 수 있습니다. 디코더 개체가 없는 경우 이미지를 디코드하는 방법을 참조하세요.
단계 2: 픽셀 데이터 공급자 개체 가져오기
매개 변수 없이 getPixelDataAsync 메서드를 호출합니다. getPixelDataAsync가 반환되면 픽셀 데이터가 할당되고 사용 준비가 됩니다.
decoder.getPixelDataAsync().then(function (pixelDataProvider) {
이런 경우 픽셀 형식 및 알파 모드가 자동으로 결정되고, EXIF 방향이 적용되며, 픽셀 데이터 색은 sRGB로 관리됩니다. 자세한 내용은 getPixelDataAsync를 참조하세요.
단계 3: 각 픽셀 형식 및 알파 모드 조합 처리
반환된 픽셀 데이터의 픽셀 형식 및 알파 모드는 런타임 시 결정되므로 앱은 자체 고유 코드 경로가 있는 각각의 잠재적 조합을 감지 및 처리해야 합니다. BitmapDecoder의 bitmapPixelFormat 및 bitmapAlphaMode 속성에 대해 쿼리하여, 반환된 픽셀 데이터의 픽셀 형식 및 알파 모드를 결정할 수 있습니다.
이 예에서는 각 픽셀의 색상 채널 값을 살펴 봅니다. 그러므로 다양한 픽셀 비트 수준 및 채널 순서를 처리해야 합니다.
var rawPixels = pixelDataProvider.detachPixelData();
var pixels, bOffset, gOffset; // Assign these in the below switch block.
switch (decoder.bitmapPixelFormat) {
case Windows.Graphics.Imaging.BitmapPixelFormat.rgba16:
// Allocate a typed array with the raw pixel data
var pixelBufferView_U8 = new Uint8Array(rawPixels);
// Uint16Array provides a typed view into the raw 8 bit pixel data.
pixels = new Uint16Array(pixelBufferView_U8.buffer);
gOffset = 1;
bOffset = 2;
break;
case Windows.Graphics.Imaging.BitmapPixelFormat.rgba8:
// For 8 bit pixel formats, just use the returned pixel array.
pixels = rawPixels;
gOffset = 1;
bOffset = 2;
break;
case Windows.Graphics.Imaging.BitmapPixelFormat.bgra8:
// For 8 bit pixel formats, just use the returned pixel array.
pixels = rawPixels;
// Bgra8 uses a different channel ordering than Rgba8 and Rgba16.
gOffset = 1;
bOffset = 0;
break;
}
switch (decoder.bitmapAlphaMode) {
// For our processing algorithm, ignore alpha mode.
case Windows.Graphics.Imaging.BitmapAlphaMode.premultiplied:
case Windows.Graphics.Imaging.BitmapAlphaMode.ignore:
case Windows.Graphics.Imaging.BitmapAlphaMode.straight:
break;
}
이 예제에서는 JavaScript 형식의 배열을 사용하여 앱이 16비트 픽셀 데이터(Rgba16 픽셀 형식에 의해 반환됨)를 처리할 수 있도록 합니다. detachPixelData 메서드는 항상 8비트 값이 들어 있는 배열을 반환하며, 이것은 C++과 같은 언어의 원시 바이트 버퍼와 동일합니다. Uint16Array를 사용하면 데이터가 16비트 값인 것처럼 원시 픽셀 배열의 데이터에 액세스할 수 있습니다.
참고 형식화된 새 배열을 만들면 픽셀 데이터의 다른 메모리 내 사본이 만들어집니다. 매우 큰 이미지를 편집하는 경우 이렇게 하면 앱의 메모리 소비가 증가합니다.
단계 4: 픽셀 반복
이제 픽셀 데이터가 있고 픽셀의 형식을 설명했으므로 계속 반복하여 이에 대해 처리합니다. 여기에서 코드는 녹색 및 파란색 채널을 종료하고 빨간색 및 알파 채널은 남겨 놓습니다.
var orientedHeight = decoder.orientedPixelHeight;
var orientedWidth = decoder.orientedPixelWidth;
for (var i = 0; i < orientedHeight; i++) {
for (var j = 0; j < orientedWidth; j++) {
pixels[(i * orientedHeight + j) * 4 + gOffset] = 0; // Green channel
pixels[(i * orientedHeight + j) * 4 + bOffset] = 0; // Blue channel
}
}
});
}
참고 이미지에 플래그가 있으면 getPixelDataAsync의 zero 매개 변수 오버로드는 항상 EXIF 방향을 적용합니다. 그러므로, 이미지의 크기를 가져올 때에는 pixelWidth 및 pixelHeight 대신 orientedPixelWidth 및 orientedPixelHeight 속성을 사용해야 합니다. orientedPixelWidth 및 orientedPixelHeight 속성은 EXIF 방향으로 인한 모든 변경 사항을 크기에 반영합니다.