픽셀 데이터를 특정 형식으로 가져오는 방법(HTML)

아티클
02/12/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

여기서는 BitmapDecoder 개체를 사용하여 이미지에서 픽셀 데이터를 가져오는 방법을 보여 줍니다. 픽셀은 바이트 배열로 패키지되며 형식은 데이터를 요청할 때 지정할 수 있습니다.

BitmapDecoder가 만들어내는 픽셀 데이터의 다음 특성을 지정할 수 있습니다.

픽셀 형식(BitmapPixelFormat)
알파 모드(BitmapAlphaMode)
대칭 이동, 회전, 크기 조정 및/또는 자르기 작업(BitmapTransform)
포함된 EXIF 방향 플래그를 준수할지 여부(ExifOrientationMode)
sRGB 색 공간에 대해 색 관리를 수행할지 여부(ColorManagementMode)

디코딩 동작에 대한 미세 조정이 필요하거나 앱에서 특정 형식의 픽셀 데이터를 기대하는 경우 유용합니다. 예를 들어 HTML Canvas Context2D API와 상호 작용하는 경우 픽셀 데이터를 Rgba8 및 스트레이트 알파로 제공해야 합니다.

알아야 할 사항

기술

사전 요구 사항

JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 빌드를 참조하세요.
BitmapDecoder 개체가 있습니다. 이미지를 디코드하는 방법에서 이 개체를 만드는 과정을 안내합니다.

지침

단계 1: 디코더 개체 가져오기

BitmapDecoder 개체를 수신하는 함수를 작성합니다.

function GetPixelData(decoder) {

디코더를 사용하면 픽셀 데이터에 액세스할 수 있습니다. 디코더 개체가 없는 경우 이미지를 디코드하는 방법을 참조하세요.

단계 2: 픽셀 데이터 공급자 개체 가져오기

getPixelDataAsync 메서드를 호출하고 매개 변수를 지정하여 반환된 픽셀 데이터의 형식을 제어합니다. 픽셀 데이터 공급자에는 지정하는 형식의 픽셀 데이터가 포함됩니다. getPixelDataAsync가 반환되면 픽셀 데이터가 할당되고 사용 준비가 된 것입니다.

decoder.getPixelDataAsync(
        Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
        Windows.Graphics.Imaging.BitmapAlphaMode.straight,
        new Windows.Graphics.Imaging.BitmapTransform(),
        Windows.Graphics.Imaging.ExifOrientationMode.respectExifOrientation,
        Windows.Graphics.Imaging.ColorManagementMode.colorManageToSRgb
    ).then(function (pixelDataProvider) {

이 경우 픽셀 형식은 RGBA8로 설정되어 있으며 알파 모드는 직선으로 설정되어 있습니다. 픽셀 데이터가 반환될 경우 처리 코드는 이 가정을 기반으로 하여 작동합니다. EXIF 방향 준수를 제외하고는 변형이 적용되지 않으며 색 관리가 사용됩니다.

참고 인수 없이 getPixelDataAsync를 호출할 수 있으며 이 메서드는 픽셀 데이터를 원래 형식으로 반환합니다. 자세한 내용은 픽셀 데이터를 기본 형식으로 가져오는 방법을 참조하세요.

단계 3: 데이터 공급자에서 픽셀 가져오기

detachPixelData 메서드를 호출하여 픽셀 데이터의 바이트 배열을 가져옵니다.

      var pixels = pixelDataProvider.detachPixelData()

detachPixelData 함수는 픽셀 데이터의 바이트 배열을 동기적으로 반환합니다. 이 예제에서는 픽셀 데이터를 Rgba8 픽셀 형식으로 요청하므로 배열에 있는 각 요소는 단일 색 채널 값에 해당합니다.

참고 detachPixelData는 한 번만 호출할 수 있습니다. 그 다음에 오는 모든 호출은 실패합니다. 픽셀을 다시 가져오려면 getPixelDataAsync를 호출하여 새 픽셀 데이터 공급자를 가져와야 합니다.

단계 4: 픽셀 반복

픽셀 데이터가 준비되었으면 처리합니다. 다음 코드에서는 녹색 및 파란색 채널을 종료하고 빨간색 및 알파 채널은 남겨 놓습니다.

        var height = decoder.orientedPixelHeight;
        var width = decoder.orientedPixelWidth;

        for (var i = 0; i < height; i++) {
            for (var j = 0; j < width; j++) {
                pixels[(i * height + j) * 4 + 1] = 0; // Green channel (RGBA)
                pixels[(i * height + j) * 4 + 2] = 0; // Blue channel (RGBA)
            }
        }
    });
}

참고 2단계에서, getPixelDataAsync에 대한 호출이, 디코더가 EXIF 방향이 적용된 픽셀 데이터를 반환하도록 지정했습니다. 그러므로 이미지 크기를 가져오려 할 때에는 pixelWidth 및 pixelHeight 대신 orientedPixelWidth 및 orientedPixelHeight 속성을 사용해야 합니다. orientedPixelWidth 및 orientedPixelHeight 속성은 EXIF 방향으로 인한 모든 변경 사항을 크기에 반영합니다.

다음을 통해 공유