Как выбрать и отобразить изображение (HTML)

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Вы научитесь использовать класс Window.Storage.Pickers.FileOpenPicker и объекты Blob для загрузки и показа изображения, выбранного пользователем.

Что необходимо знать

Технологии

Необходимые условия

Вы должны уметь создавать простое приложение Магазина Windows на JavaScript. Дополнительные сведения см. в разделе Создание первого приложения Магазина Windows на JavaScript.

Инструкции

Этап 1: Создание элементов для выбора и показа изображения

В этом примере создается кнопка, которую пользователь нажимает, чтобы запустить FileOpenPicker, абзац для отображения сведений об изображении и элемент img для показа изображения.
```
<button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />
```
Добавьте обработчик событий loadImage в событие нажатия кнопки. В этом примере добавляется обработчик событий при завершении работы функции WinJS.UI.processAll. Дополнительные сведения о том, куда следует добавлять обработчики событий, см. в разделе Краткое руководство. Добавление элементов управления и обработка событий.
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
Определим обработчик событий loadImage на следующем этапе.

Этап 2: Выбор изображения

Чтобы разрешить пользователю выбрать изображение, создайте новый объект Window.Storage.Pickers.FileOpenPicker в JavaScript и настройте его свойство fileTypeFilter для типов файлов, которые вы хотите сделать доступными. Чтобы отобразить класс FileOpenPicker, вызовите метод pickSingleFileAsync.

Метод pickSingleFileAsync возвращает объект Promise для выбранного изображения. Укажите функцию для обработки результатов и функцию для обработки ошибок (мы реализуем указанные методы далее в этом разделе).

В этом примере определяется функция loadImage, которая создает и показывает класс FileOpenPicker. Эта функция вызывается при нажатии пользователем кнопки selectImageButton, которую вы определили на предыдущем этапе.

function loadImage(eventInfo) {

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

Этап 3: Обработка выбранного файла

Определите функцию, которая вызывается, когда пользователь успешно выбирает изображение.

Определите функцию, которая использует StorageFile в качестве параметра.
```
function processResults(file)
{

}
```

Убедитесь, что файл существует.

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."); 
    }
}

Используйте метод URL.createObjectURL, чтобы создать объект Blob из StorageFile.

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."); 
    }
}

Используйте объект Blob, чтобы задать свойство src элемента img. В этом примере также отображается имя выбранного файла изображения.

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."); 
    }
}

Выпустите объект 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;
    }

Поделиться через