Comment obtenir des données de pixels dans un format particulier (HTML)

Article
02/12/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous allez découvrir comment utiliser un objet BitmapDecoder pour obtenir des données de pixels à partir d’une image. Les pixels sont empaquetés sous forme de tableau d’octets et vous pouvez spécifier le format lorsque vous demandez les données.

Vous pouvez préciser les attributs suivants pour les données de pixels produites par BitmapDecoder :

Format de pixel (BitmapPixelFormat).
Mode alpha (BitmapAlphaMode).
Opération de rotation, de mise à l’échelle et/ou de recadrage (BitmapTransform).
Nécessité de respecter un indicateur d’orientation EXIF incorporé (ExifOrientationMode).
Nécessité de gérer les couleurs dans l’espace de couleurs sRVB (ColorManagementMode).

Ceci est utile si vous devez mieux contrôler le comportement de décodage ou si votre application s’attend à des données de pixels dans un format en particulier. Par exemple, si vous travaillez avec l’API HTML Canvas Context2D, vous devez fournir les données de pixels au format Rgba8 et en mode alpha droit.

Ce que vous devez savoir

Technologies

Prérequis

Nous partons du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour plus d’informations, voir Création de votre première application Windows Runtime en JavaScript.
Vous disposez d’un objet BitmapDecoder. La rubrique Comment décoder une image vous guide tout au long du processus de création d’un objet.

Instructions

Étape 1: Obtenir un objet de décodeur

Écrivez le début d’une fonction qui reçoit un objet BitmapDecoder.

function GetPixelData(decoder) {

Le décodeur vous permet d’accéder aux données de pixels. Si vous ne disposez pas encore d’un objet de décodeur, voir Comment décoder une image.

Étape 2: Obtenir un objet de fournisseur de données de pixels

Appelez la méthode getPixelDataAsync et précisez les paramètres afin de contrôler le format des données de pixels renvoyées. Le fournisseur de données de pixels contient les données de pixels dans le format que vous spécifiez. Lorsque la méthode getPixelDataAsync renvoie un résultat, les données de pixels sont allouées et sont prêtes à l’emploi.

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

Dans ce cas, le format de pixel défini est RGBA8 et le mode alpha est droit. Lors du renvoi des données de pixels, le code de traitement fonctionne sur la base de cette hypothèse. Aucune transformation n’est appliquée, sauf en matière d’orientation EXIF, et la gestion des couleurs est activée.

Remarque Vous pouvez appeler getPixelDataAsync sans arguments. La méthode renvoie alors les données de pixels dans leur format d’origine. Pour plus d’informations, voir Comment obtenir des données de pixels au format par défaut.

Étape 3: Obtenir les pixels auprès du fournisseur de données

Appelez la méthode detachPixelData pour obtenir un tableau d’octets des données de pixels.

      var pixels = pixelDataProvider.detachPixelData()

La fonction detachPixelData renvoie un tableau d’octets des données de pixels de manière synchrone. Cet exemple demande des données de pixels au format de pixel Rgba8 de sorte que chaque élément au sein du tableau correspond à une valeur de canal de couleur unique.

Remarque Vous pouvez appeler detachPixelData une fois seulement. Tous les appels suivants échouent. Si vous souhaitez obtenir de nouveau les pixels, vous devez appeler getPixelDataAsync pour obtenir un nouveau fournisseur de données de pixels.

Étape 4: Parcourir les pixels en boucle

Les données de pixels étant à votre disposition, vous devez à présent les traiter. Le code présenté ici omet les canaux vert et bleu et ne conserve que les canaux rouge et alpha.

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

Remarque À l’étape 2, l’appel à getPixelDataAsync précisait que le décodeur devait renvoyer les données de pixels en appliquant l’orientation EXIF. Il est donc important d’utiliser les propriétés orientedPixelWidth et orientedPixelHeight plutôt que les propriétés pixelWidth et pixelHeight lorsque vous souhaitez vous procurer les dimensions de l’image. Les propriétés orientedPixelWidth et orientedPixelHeight reflètent tous les changements de dimension qui résultent de l’orientation EXIF.