이미지를 디코딩하는 방법(HTML)

아티클
02/12/2016

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

파일에서 이미지를 로드하고 <img> 태그를 사용하여 이미지를 표시하고 이미지에서 BitmapDecoder 개체를 만드는 방법을 보여 줍니다. BitmapDecoder를 사용하여 메타데이터에 액세스하고 이미지에서 픽셀 데이터를 가져올 수 있습니다.

알아야 할 사항

기술

사전 요구 사항

사용자가 JavaScript를 사용하여 기본 Windows 런타임 앱을 만드는 방법을 알고 있다고 가정합니다. 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 빌드를 참조하세요.

지침

단계 1: 개체 틀 이미지 추가

HTML 파일에 <img> 태그를 추가합니다.

<img id="myImage" src="" />

나중에 이미지 파일을 myImage 개체로 로드합니다.

단계 2: 파일 선택기를 사용하여 이미지 파일 선택

사용자가 열 파일을 선택할 수 있도록 새 FileOpenPicker 개체를 만듭니다. 파일 확장명을 설정하여 JPEG 이미지를 필터링합니다. 그런 다음 선택기를 표시합니다.

function DecodeImage() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.append(".jpg");
    picker.pickSingleFileAsync().then(function (file) {
        if (!file) {

참고 Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator를 사용하여 시스템에 설치한 코덱에서 지원하는 모든 파일 확장명 목록을 가져올 수 있습니다.

참고 사용자가 취소하면 pickSingleFileAsync 메서드는 null 개체를 반환합니다.

단계 3: Image 요소에 이미지 표시

파일의 개체 URL을 만들고 Image 요소의 원본으로 설정합니다.

createObjectURL 메서드는 StorageFile과 같은 개체의 데이터를 통해 지원되는 URL을 만듭니다.

            var objectURL = window.URL.createObjectURL(file, { oneTimeOnly: true });
            document.getElementById("myImage").src = objectURL;

단계 4: 디코더 개체 만들기

읽기 액세스 모드로 파일을 열어 IRandomAccessStream을 가져옵니다. 그런 다음 스트림에서 BitmapDecoder 개체를 만듭니다.

    }).then(function (stream) {
        return Windows.Graphics.Imaging.BitmapDecoder.createAsync(stream);
    }).done(function (decoder) {
        // BitmapDecoder is ready for use.
    });
}

설명

이제 디코더 개체가 있으므로 이 개체를 사용하여 다음을 수행할 수 있습니다.

이미지에서 메타데이터를 읽습니다. 자세한 내용은 이미지 메타데이터를 읽는 방법을 참조하세요.
이미지에서 픽셀 데이터를 가져옵니다. 자세한 내용은 픽셀 데이터를 가져오는 방법을 참조하세요.
코드 변환하여 인코더를 만듭니다. 자세한 내용은 이미지를 인코드하는 방법을 참조하세요.