Como obter os dados de pixel em um determinado formato (HTMl)

Artigo
02/16/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Mostramos como usar um objeto BitmapDecoder para obter dados de pixel de uma imagem. Os pixels são empacotados como uma matriz de bytes e você pode especificar o formato quando solicitar os dados.

Você pode especificar estes atributos dos dados de pixel que o BitmapDecoder produz:

O formato de pixel (BitmapPixelFormat).
O modo alfa (BitmapAlphaMode).
Uma operação de inversão, rotação, dimensionamento e/ou corte (BitmapTransform).
Se será ou não respeitado um sinalizador de orientação EXIF inserido (ExifOrientationMode).
Se será ou não executado gerenciamento de cores para o espaço de cores sRGB (ColorManagementMode).

Isso é útil se você precisa de ajuste fino no controle do comportamento de decodificação ou se seu aplicativo espera que os dados de pixel estejam em um determinado formato. Por exemplo, se você está interoperando com a API HTML Canvas Context2D API, é necessário fornecer dados de pixel como Rgba8 e alfa puro.

O que você precisa saber

Tecnologias

Pré-requisitos

Presumimos que você consiga criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter mais informações, veja Compilando seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.
Você tem um objeto BitmapDecoder. O tópico Como decodificar uma imagem percorre com você o processo.

Instruções

Etapa 1: Obter um objeto de decodificador

Grave o início de uma função que recebe um objeto BitmapDecoder.

function GetPixelData(decoder) {

O decodificador permite acessar os dados de pixel. Se você ainda não tem um objeto de decodificador, veja Como decodificar uma imagem.

Etapa 2: Obter o objeto do provedor de dados em pixel

Chame o método getPixelDataAsync e especifique os parâmetros para controlar o formato dos dados de pixel retornados. O provedor de dados de pixel contém esses dados no formato que você especificar. Quando getPixelDataAsync é retornado, os dados de pixel são alocados e ficam prontos para uso.

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) {

Nesse caso, definimos o formato de pixel como RGBA8 e o modo alfa como puro. Quando os dados de pixel são retornados, o código de manipulação trabalha com base nessa suposição. Não aplicamos nenhuma transformação, exceto para respeitar a orientação EXIF, e o gerenciamento de cores é habilitado.

Observação Você pode chamar getPixelDataAsync sem argumentos; o método retorna os dados de pixel no formato original. Veja Como obter dados de pixel no formato padrão para saber mais.

Etapa 3: Obter os pixels do provedor de dados

Chame o método detachPixelData para obter uma matriz de bytes dos dados de pixel.

      var pixels = pixelDataProvider.detachPixelData()

A função detachPixelData retorna uma matriz de bytes de dados de pixel de forma síncrona. Esse exemplo solicita dados de pixel no formato de pixel Rgba8, para que cada elemento na matriz corresponda a um único valor de canal de cor.

Observação Você só pode chamar detachPixelData uma vez. Todas as chamadas subsequentes falham. Se você quiser obter os pixels novamente, é necessário chamar getPixelDataAsync para obter um novo provedor de dados de pixel.

Etapa 4: Executar um loop nos pixels

Agora que você tem os dados de pixel, processe-os. O código aqui torna zero os canais verde e azul, deixando os canais vermelho e 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)
            }
        }
    });
}

Observação Na Etapa 2, a chamada para getPixelDataAsync especificou que o decodificador retornasse os dados de pixel com a orientação EXIF aplicada. Portanto, é importante usar as propriedades orientedPixelWidth e orientedPixelHeight, em vez de pixelWidth e pixelHeight ao obter as dimensões de imagem. As propriedades orientedPixelWidth e orientedPixelHeight refletem qualquer mudança nas dimensões resultantes da orientação EXIF.