Получение пиксельных данных в формате по умолчанию (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
Рассмотрим, как использовать объект BitmapDecoder для получения пиксельных данных из изображения. Пиксели упакованы в виде массива байтов, и объект BitmapDecoder автоматически выбирает лучший формат для использования.
BitmapDecoder может автоматически определить лучший формат пикселей для изображения и предоставить пиксельные данные в этом формате. Это может быть полезно при загрузке изображений, например, сохраненных в формате JPEG-XR, поддерживающем большую точность, чем 8 бит на канал. Если оптимальный формат пикселей определен с помощью BitmapDecoder, вы должны обнаруживать и обрабатывать все возможные комбинации формата пикселей и альфа-режима, поскольку они определяются во время выполнения, когда изображение декодируется.
Примечание
Если вы хотите получать пиксельные данные в определенном формате, см. раздел Получение пиксельных данных в определенном формате.
Что необходимо знать
Технологии
Необходимые условия
- Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Подробнее: Создание первого приложения среды выполнения Windows на JavaScript.
- Итак, у вас есть объект BitmapDecoder. Процедура его создания описана в разделе Декодирование изображения.
Инструкции
Этап 1: Получение объекта декодера
Сначала запишите функцию, которая получает объект BitmapDecoder, и объявите переменные для хранения загруженных свойств.
function DecodeDefaultPixels(decoder) {
Декодер позволяет получить доступ к пиксельным данным. Если у вас еще нет объекта декодера, см. раздел Декодирование изображения.
Этап 2: Получение объекта поставщика пиксельных данных
Вызовите метод getPixelDataAsync без параметров. При возврате getPixelDataAsync пиксельные данные выделены и готовы к использованию.
decoder.getPixelDataAsync().then(function (pixelDataProvider) {
В этом случае формат пикселей и режим альфа-канала определяются автоматически, применяется ориентация EXIF, и пиксельные данные преобразуются в цветовое пространство sRGB. Дополнительные сведения см. в разделе getPixelDataAsync.
Этап 3: Обработка каждого из сочетаний формата пикселей и режима альфа-канала.
Так как формат пикселей и альфа-режим возвращаемых пиксельных данных определяется во время выполнения, ваше приложение должно обнаруживать и обрабатывать каждую потенциальную комбинацию, которая обладает собственным уникальным путем к коду. Формат пикселей и альфа-режим возвращаемых пиксельных данных можно определить с помощью запроса свойств bitmapPixelFormat и bitmapAlphaMode в BitmapDecoder.
В этом примере мы привели значения цветовых каналов каждого пикселя. Таким образом, вам необходимо обрабатывать различные значения глубины цвета пикселей и варианты упорядочивания каналов.
var rawPixels = pixelDataProvider.detachPixelData();
var pixels, bOffset, gOffset; // Assign these in the below switch block.
switch (decoder.bitmapPixelFormat) {
case Windows.Graphics.Imaging.BitmapPixelFormat.rgba16:
// Allocate a typed array with the raw pixel data
var pixelBufferView_U8 = new Uint8Array(rawPixels);
// Uint16Array provides a typed view into the raw 8 bit pixel data.
pixels = new Uint16Array(pixelBufferView_U8.buffer);
gOffset = 1;
bOffset = 2;
break;
case Windows.Graphics.Imaging.BitmapPixelFormat.rgba8:
// For 8 bit pixel formats, just use the returned pixel array.
pixels = rawPixels;
gOffset = 1;
bOffset = 2;
break;
case Windows.Graphics.Imaging.BitmapPixelFormat.bgra8:
// For 8 bit pixel formats, just use the returned pixel array.
pixels = rawPixels;
// Bgra8 uses a different channel ordering than Rgba8 and Rgba16.
gOffset = 1;
bOffset = 0;
break;
}
switch (decoder.bitmapAlphaMode) {
// For our processing algorithm, ignore alpha mode.
case Windows.Graphics.Imaging.BitmapAlphaMode.premultiplied:
case Windows.Graphics.Imaging.BitmapAlphaMode.ignore:
case Windows.Graphics.Imaging.BitmapAlphaMode.straight:
break;
}
В этом примере мы используем типизированные массивы JavaScript, чтобы разрешить приложению обработку шестнадцатибитных пиксельных данных (возвращаемых в формате пикселей Rgba16). Метод detachPixelData всегда возвращает массив, содержащий 8-битные значения. Это эквивалентно буферу необработанных байтов в таком языке, как C++. Uint16Array позволяет получить доступ к данным в массиве необработанных пикселей, как если бы он состоял из 16-битных значений.
Примечание Когда вы создаете новый типизированный массив, это приводит к появлению в памяти еще одной копии пиксельных данных. Если вы редактируете очень большое изображение, то потребление памяти вашим приложением увеличивается.
Этап 4: Проход по пикселям
Теперь, когда у вас есть пиксельные данные точек и выяснен формат пикселей, выполните проход по пикселям и их обработку. Данный код обнуляет зеленый и синий каналы, оставляя красный канал и альфа-канал.
var orientedHeight = decoder.orientedPixelHeight;
var orientedWidth = decoder.orientedPixelWidth;
for (var i = 0; i < orientedHeight; i++) {
for (var j = 0; j < orientedWidth; j++) {
pixels[(i * orientedHeight + j) * 4 + gOffset] = 0; // Green channel
pixels[(i * orientedHeight + j) * 4 + bOffset] = 0; // Blue channel
}
}
});
}
Примечание Нулевая перегрузка параметра getPixelDataAsync всегда применяет ориентацию EXIF при наличии флага в изображении. Таким образом, при получении размеров изображения важно использовать свойства orientedPixelWidth и orientedPixelHeight вместо pixelWidth и pixelHeight. Свойства orientedPixelWidth и orientedPixelHeight отражают любые изменения размеров из-за ориентации EXIF.