Декодирование изображения (HTML)

Статья
02/16/2016

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

Вы узнаете, как загрузить изображение из файла, отобразить его с помощью тега <img> и создать из него объект BitmapDecoder. Объект BitmapDecoder позволяет получать доступ к метаданным и извлекать пиксельные данные изображений.

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

Технологии

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

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

Инструкции

Этап 1: Добавление изображения-заполнителя

Добавьте тег <img> в свой HTML-файл.

<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 возвратит пустой объект в случае отмены пользователем.

Этап 3: Отображение изображения в элементе Image

Создайте URL-адрес объекта для файла и установите его как источник элемента Image.

Метод createObjectURL создаст URL-адрес, указывающий на данные из такого объекта, как StorageFile.

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

Примечания

Когда у вас появится объект декодера, с его помощью вы сможете:

Читать метаданные изображения Дополнительные сведения см. в разделе Чтение метаданных изображения.
Извлекать из изображения пиксельные данные Подробнее см. в разделе Получение пиксельных данных.
Создавать кодировщик путем перекодировки Подробнее см. в разделе Кодирование изображения.