Cómo obtener datos de píxeles en un determinado formato (HTML)

Artículo
02/16/2016

[ 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 puedes especificar el formato cuando solicites los datos.

Puedes especificar estos atributos de los datos de píxeles que produce BitmapDecoder:

El formato de píxel (BitmapPixelFormat).
El modo alfa (BitmapAlphaMode).
Una operación de volteo, giro, escala y/o recorte (BitmapTransform).
Si se respeta una marca de orientación de EXIF incrustada (ExifOrientationMode).
Si se realiza la administración de color en el espacio de colores sRGB (ColorManagementMode).

Esto es útil si necesitas controlar el comportamiento de descodificación o si la aplicación espera que los datos de píxeles tengan un determinado formato. Por ejemplo, si estás interoperando con la API HTML Canvas Context2D, debes proporcionar datos de píxeles como Rgba8 y alfa recto.

Lo que debes saber

Tecnologías

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.

function GetPixelData(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 y especifica parámetros para controlar el formato de los datos de píxeles devueltos. El proveedor de datos de píxeles contiene datos de píxeles en el formato especificado. Cuando se devuelve getPixelDataAsync, los datos de píxeles se asignan y están listos para usarse.

decoder.getPixelDataAsync(
        Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
        Windows.Graphics.Imaging.BitmapAlphaMode.straight,
        new Windows.Graphics.Imaging.BitmapTransform(),
        Windows.Graphics.Imaging.ExifOrientationMode.respectExifOrientation,
        Windows.Graphics.Imaging.ColorManagementMode.colorManageToSRgb
    ).then(function (pixelDataProvider) {

En este caso, establecemos el formato de píxel en RGBA8 y el modo alfa en recto. Cuando se devuelven los datos de píxeles, el código de control funciona según esta hipótesis. No aplicamos ninguna transformación excepto la referida a la orientación de EXIF y se habilita la administración de color.

Nota Puedes llamar a getPixelDataAsync sin argumentos y el método devolverá los datos de píxeles en el formato original. Consulta Cómo obtener datos de píxeles en el formato predeterminado para obtener más información.

Paso 3: Obtener píxeles del proveedor de datos

Llama al método detachPixelData para obtener una matriz de bytes de los datos de píxeles.

      var pixels = pixelDataProvider.detachPixelData()

La función detachPixelData devuelve una matriz de bytes de datos de píxeles de forma sincrónica. Este ejemplo solicita datos de píxeles en el formato de píxel Rgba8, de modo que cada elemento de la matriz se corresponde con un solo valor de canal de color.

Nota Solo puedes llamar a detachPixelData una vez. Todas las llamadas posteriores darán error. Si quieres volver a obtener los píxeles, necesitas llamar a getPixelDataAsync para obtener un nuevo proveedor de datos de píxeles.

Paso 4: Repetir los píxeles

Ahora que tienes los datos de píxeles, procésalos. Este código reduce a cero los canales verde y azul, dejando los canales rojo y alfa.

        var height = decoder.orientedPixelHeight;
        var width = decoder.orientedPixelWidth;

        for (var i = 0; i < height; i++) {
            for (var j = 0; j < width; j++) {
                pixels[(i * height + j) * 4 + 1] = 0; // Green channel (RGBA)
                pixels[(i * height + j) * 4 + 2] = 0; // Blue channel (RGBA)
            }
        }
    });
}

Nota En el paso 2, la llamada a getPixelDataAsync especifica que el descodificador devuelva los datos de píxeles con la orientación de EXIF aplicada. Por eso es importante usar las propiedades orientedPixelWidth y orientedPixelHeight, en lugar de pixelWidth y pixelHeight, cuando quieras obtener las dimensiones de imagen. Las propiedades orientedPixelWidth y orientedPixelHeight reflejan los cambios de dimensiones derivados de la orientación de EXIF.