Cómo obtener datos de píxeles en el formato predeterminado (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Te mostramos cómo usar un objeto BitmapDecoder para obtener datos de píxeles de una imagen. Los píxeles se empaquetan como una matriz de bytes y el objeto BitmapDecoder selecciona automáticamente el mejor formato que se puede usar.
BitmapDecoder puede determinar automáticamente el formato de píxel más adecuado para la imagen y proporcionar datos de píxeles en dicho formato. Esto puede ser útil si se cargan imágenes almacenadas en un formato que admita una precisión superior a 8 bits por canal, como JPEG-XR. Si dejas que BitmapDecoder determine el formato de píxel óptimo, debes detectar y controlar todas las combinaciones posibles de formato de píxel y modo alfa, ya que se determinan en tiempo de ejecución cuando se descodifica la imagen.
Nota
Si quieres obtener los datos de píxeles en un formato en particular, consulta Cómo obtener datos de píxeles en un determinado formato.
Lo que debes saber
Tecnologías
- Crear tu primera aplicación de Windows en tiempo de ejecución con JavaScript
- Windows.Graphics.Imaging
Requisitos previos
- Damos por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Para obtener más información, consulta el tema sobre cómo crear tu primera aplicación de Windows en tiempo de ejecución con JavaScript.
- Tienes un objeto BitmapDecoder. El tema sobre cómo descodificar una imagen te guía a través del proceso de creación de tal objeto.
Instrucciones
Paso 1: Obtener un objeto descodificador
Escribe el inicio de una función que recibe un objeto BitmapDecoder y declara las variables en las que deseas almacenar las propiedades devueltas.
function DecodeDefaultPixels(decoder) {
El descodificador te permite acceder a los datos de píxeles. Si aún no tienes un objeto descodificador, consulta el tema sobre cómo descodificar una imagen.
Paso 2: Obtener un objeto del proveedor de datos de píxeles
Llama al método getPixelDataAsync sin parámetros. Cuando se devuelve getPixelDataAsync, los datos de píxeles se asignan y están listos para su uso.
decoder.getPixelDataAsync().then(function (pixelDataProvider) {
En este caso, el formato de píxel y el modo alfa se determinan de forma automática, se aplica la orientación de EXIF y la administración del color de los datos de píxel se realiza con sRGB. Consulta getPixelDataAsync para obtener más información.
Paso 3: Controlar cada combinación de formato de píxel y modo alfa
Como el formato de píxel y el modo alfa de los datos de píxeles devueltos se determinan en tiempo de ejecución, tu aplicación debe detectar y controlar todas las combinaciones posibles, con su propia ruta de código única. Para determinar el formato de píxel y el modo alfa de los datos de píxeles devueltos, consulta las propiedades bitmapPixelFormat y bitmapAlphaMode en BitmapDecoder.
En este ejemplo, recorremos cada uno de los valores de canal de color de píxel. Por lo tanto, debes controlar distintos valores de profundidad de bits y orden de canal de los píxeles.
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;
}
En este ejemplo, usamos matrices tipadas JavaScript para permitir que la aplicación controle datos de píxeles de16 bits (devueltos por el formato de píxel Rgba16). El método detachPixelData siempre devuelve una matriz que contiene valores de 8 bits, que equivalen a un búfer de bytes sin procesar en un lenguaje como C++. Una Uint16Array permite acceder a los datos en la matriz de píxeles sin procesar como si fuesen valores de 16 bits.
Nota Cuando creas una nueva matriz tipada, se obtiene otra copia de los datos de píxeles en memoria. Si estás editando una imagen muy grande, aumenta el consumo de memoria de la aplicación.
Paso 4: Repetir los píxeles
Ahora que ya tienes los datos de píxeles y que has dado cuenta del formato de los píxeles, repítelos y procésalos. Este código reduce a cero los canales verde y azul, dejando los canales rojo y alfa.
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
}
}
});
}
Nota La sobrecarga de parámetros cero de getPixelDataAsync aplica siempre la orientación de EXIF si la marca está presente en la imagen. Por lo tanto, al obtener las dimensiones de la imagen, es importante usar las propiedades orientedPixelWidth y orientedPixelHeight, en lugar de pixelWidth y pixelHeight. Las propiedades orientedPixelWidth y orientedPixelHeight reflejan los cambios de dimensiones derivados de la orientación de EXIF.