이미지 선택 및 표시 방법(HTML)

  • 아티클

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

Window.Storage.Pickers.FileOpenPicker 및 Blob 개체를 사용하여 사용자가 선택하는 이미지를 로드하고 표시하는 방법을 알아봅니다.

알아야 할 사항

기술

사전 요구 사항

지침

단계 1: 이미지를 선택하고 표시하기 위한 요소 만들기

  1. 다음 예제에서는 사용자가 FileOpenPicker를 실행하기 위해 클릭하는 단추, 이미지에 대한 정보를 표시할 단락, 그리고 이미지를 표시할 img 요소를 만듭니다.

    <button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />

  2. 단추의 클릭 이벤트에 loadImage 이벤트 처리기를 추가합니다. 다음 예제에서는 WinJS.UI.processAll 함수가 완료될 때 이벤트 처리기를 추가합니다. 이벤트 처리기를 연결할 위치에 대한 자세한 내용은 빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.

                WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });

    다음 단계에서는 loadImage 이벤트 처리기를 정의합니다.

단계 2: 이미지 선택

사용자가 이미지를 선택할 수 있도록 하려면 JavaScript로 새 Window.Storage.Pickers.FileOpenPicker를 만들고 해당 fileTypeFilter를 사용할 수 있게 하려는 이미지 유형으로 설정합니다. FileOpenPicker를 표시하려면 pickSingleFileAsync 메서드를 호출합니다.

pickSingleFileAsync에서 선택한 이미지에 대한 완성도를 반환합니다. 결과를 처리할 함수와 오류를 처리할 함수를 지정합니다. 이러한 메서드는 이 항목의 뒷부분에서 구현합니다.

이 예제는 FileOpenPicker를 만들고 표시하는 loadImage 함수를 정의합니다. 이 함수는 이전 단계에서 정의한 selectImageButton을 사용자가 클릭할 때 호출됩니다.

function loadImage(eventInfo) {

    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().then(processResults, displayError);
}

단계 3: 선택한 파일 처리

사용자가 이미지를 성공적으로 선택할 때 호출되는 함수를 정의합니다.

  1. StorageFile을 매개 변수로 사용하는 함수를 정의합니다.

    function processResults(file)
{

}

  2. 파일이 있는지 여부를 확인합니다.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {

    } else {
        displayError("An image wasn't selected."); 
    }
}

  3. URL.createObjectURL 메서드를 사용하여 StorageFile에서 Blob을 만듭니다.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);

    } else {
        displayError("An image wasn't selected."); 
    }
}

  4. Blob을 사용하여 img 요소의 src 속성을 설정합니다. 이 예제에서는 선택한 이미지의 파일 이름도 표시합니다.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

    } else {
        displayError("An image wasn't selected."); 
    }
}

  5. Blob을 해제합니다.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

        // Release the blob resources.
        URL.revokeObjectURL(imageBlob);
    } else {
        displayError("An image wasn't selected."); 
    }
}

단계 4: 오류 처리

오류가 발생했음을 사용자에게 알리는 메서드를 구현합니다. 오류 메시지를 매개 변수로 사용합니다.

    function displayError(error) {
        if (imageBlob) {
            URL.revokeObjectURL(imageBlob);
        }
        document.getElementById("imageInformation").innerText = error;
    }