So wird’s gemacht: Abrufen von Pixeldaten in einem bestimmten Format (HTML)

Artikel
02/16/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Wir zeigen Ihnen, wie mithilfe eines BitmapDecoder-Objekts Pixeldaten von einem Bild abgerufen werden. Die Pixel werden zu einem Bytearray zusammengefasst. Wenn Sie die Daten anfordern, können Sie das Format angeben.

Sie können folgende Attribute für die vom BitmapDecoder gelieferten Pixeldaten angeben:

Das Pixelformat (BitmapPixelFormat).
Den Alphamodus (BitmapAlphaMode).
Eine Spiegelung, Rotation, Skalierung und/oder ein Zuschnitt (BitmapTransform).
Die Angabe, ob ein eingebettetes EXIF-Ausrichtungsflag beachtet werden soll (ExifOrientationMode).
Die Angabe, ob Farbverwaltung im sRGB-Farbraum durchgeführt werden soll (ColorManagementMode).

Dies ist nützlich, wenn Sie das Decoderverhalten exakt kontrollieren müssen oder wenn die App Pixeldaten in einem bestimmten Format erwartet. Wenn Sie z. B. mit der HTML Canvas Context2D API interagieren, müssen Sie Pixeldaten als "Rgba8" mit dem Alphamodus "Straight" liefern.

Wissenswertes

Technologien

Voraussetzungen

Es wird vorausgesetzt, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Weitere Informationen finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript.
Sie haben ein BitmapDecoder-Objekt erstellt. Unter So wird's gemacht: Decodieren von Bildern wird dieser Vorgang schrittweise erläutert.

Anweisungen

Schritt 1: Abrufen eines Decoderobjekts

Schreiben Sie zu Beginn eine Funktion, die ein BitmapDecoder-Objekt erhält.

function GetPixelData(decoder) {

Mit dem Decoder können Sie auf die Pixeldaten zugreifen. Falls Sie noch kein Decoderobjekt haben, lesen Sie So wird's gemacht: Decodieren von Bildern.

Schritt 2: Abrufen eines Anbieterobjekts für die Pixeldaten

Rufen Sie die getPixelDataAsync-Methode auf und geben Sie Parameter an, mit denen das Format der zurückgegebenen Pixeldaten bestimmt wird. Der Pixeldatenanbieter enthält die Pixeldaten in dem von Ihnen angegebenen Format. Die von getPixelDataAsync zurückgegebenen Pixeldaten werden zugeordnet und können direkt verwendet werden.

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

In diesem Fall legen Sie das Pixelformat auf "RGBA8" und den Alphamodus auf "Straight" fest. Wenn die Pixeldaten zurückgegeben werden, arbeitet der Handlercode auf der Grundlage dieser Annahme. Wir führen keine Transformationen durch, mit der Ausnahme, dass wir die EXIF-Ausrichtung beachten und die Farbverwaltung aktiviert ist.

Hinweis Sie können getPixelDataAsync ohne Argumente aufrufen. Die Funktion gibt die Pixeldaten dann im ursprünglichen Format zurück. Weitere Informationen finden Sie unter So wird's gemacht: Abrufen von Pixeldaten im Standardformat.

Schritt 3: Abrufen der Pixel vom Datenanbieter

Rufen Sie die detachPixelData-Methode auf, um ein Bytearray mit Pixeldaten abzurufen.

      var pixels = pixelDataProvider.detachPixelData()

Die detachPixelData-Funktion gibt synchron ein Bytearray mit Pixeldaten zurück. In diesem Beispiel werden Pixeldaten im Pixelformat "Rgba8" angefordert, sodass jedes Arrayelement einem einzelnen Farbkanalwert entspricht.

Hinweis Sie können detachPixelData nur einmal aufrufen. Alle weiteren Aufrufe führen zu einem Fehler. Wenn Sie die Pixel erneut abrufen möchten, müssen Sie durch einen Aufruf von getPixelDataAsync einen neuen Pixeldatenanbieter anfordern.

Schritt 4: Durchlaufen der Pixel

Nach dem Abrufen der Pixel können diese verarbeitet werden. Der Code füllt den grünen und den blauen Kanal mit 0 und lässt den roten Kanal und den Alphakanal unverändert.

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

Hinweis In Schritt 2 gab der Aufruf von getPixelDataAsync an, dass der Decoder die Pixeldaten mit durchgeführter EXIF-Ausrichtung zurückgeben soll. Es ist daher wichtig, dass Sie die orientedPixelWidth- und die orientedPixelHeight-Eigenschaft anstelle von pixelWidth und pixelHeight verwenden, wenn Sie die Abmessungen des Bilds erhalten möchten. Die orientedPixelWidth- und die orientedPixelHeight-Eigenschaft geben alle Änderungen der Abmessungen wieder, die das Ergebnis einer EXIF-Ausrichtung sind.