So wird’s gemacht: Abrufen von Pixeldaten im Standardformat (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 sind als Bytearray zusammengefasst und das BitmapDecoder-Objekt wählt automatisch das zu verwendende Format aus.

BitmapDecoder kann automatisch das für das Bild am besten geeignete Pixelformat und Pixeldaten in diesem Format liefern. Dies kann nützlich sein, wenn Sie Bilder laden, die in einem Format wie JPEG-XR gespeichert sind, das eine Genauigkeit von mehr als 8 Bit pro Kanal unterstützt. Wenn BitmapDecoder das optimale Pixelformat bestimmt, müssen Sie jede mögliche Kombination von Pixelformat und Alphamodus erkennen und behandeln, da diese zur Laufzeit beim Decodieren des Bilds ermittelt werden.

Hinweis

Wenn Sie die Pixeldaten in einem bestimmten Format erhalten möchten, lesen Sie So wird's gemacht: Abrufen von Pixeldaten in einem bestimmten Format.

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 den Anfang einer Funktion, die ein BitmapDecoder-Objekt empfängt. Geben Sie außerdem Variablen an, in denen die abgerufenen Eigenschaften gespeichert werden.

function DecodeDefaultPixels(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 ohne Parameter auf. Nach der Rückkehr von getPixelDataAsync werden die Pixeldaten zugeordnet und können direkt verwendet werden.

decoder.getPixelDataAsync().then(function (pixelDataProvider) {

In diesem Fall werden Pixelformat und Alphamodus automatisch festgelegt, die EXIF-Ausrichtung angewendet und die sRGB-Farbverwaltung für Pixeldaten aktiviert. Weitere Informationen finden Sie unter getPixelDataAsync.

Schritt 3: Behandeln aller Kombinationen von Pixelformat und Alphamodus

Da Pixelformat und Alphamodus der zurückgegebenen Pixeldaten zur Laufzeit bestimmt werden, muss Ihre App jede mögliche Kombination erkennen und behandeln. Jede besitzt einen eigenen Codepfad. Sie können Pixelformat und Alphamodus der zurückgegebenen Pixeldaten durch Abfragen der bitmapPixelFormat- und der bitmapAlphaMode-Eigenschaft von BitmapDecoder bestimmen.

In diesem Beispiel durchlaufen wir die Farbkanäle jedes Pixels. Sie müssen daher verschiedene Bittiefen für Pixel und Kanalreihenfolgen behandeln.

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

In diesem Beispiel verwenden wir mit JavaScript typisierte Arrays, damit die App 16-Bit-Pixeldaten (die beim Pixelformat "Rgba16" zurückgegeben werden) behandeln kann. Die detachPixelData-Methode gibt immer ein Array mit 8-Bit-Werten zurück. Dies entspricht einem unformatierten Byte-Puffer in einer Programmiersprache wie C++. Mit einem Uint16Array können Sie auf die Daten im unformatierten Pixelarray wie auf 16-Bit-Werte zugreifen.

Hinweis Wenn Sie ein neues typisiertes Array erstellen, erhalten Sie eine weitere Kopie der Pixeldaten im Arbeitsspeicher. Wenn Sie ein sehr großes Bild bearbeiten, erhöht sich dadurch der Speicherverbrauch Ihrer App.

Schritt 4: Durchlaufen der Pixel

Nachdem Sie nun über die Pixeldaten verfügen und das Format der Pixeldaten beachtet haben, durchlaufen und verarbeiten Sie die Pixel. 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 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
            }
        }
    });
}

Hinweis Die Überladung von getPixelDataAsync ohne Parameter führt immer die EXIF-Ausrichtung durch, wenn im Bild das entsprechende Flag vorhanden ist. Wenn Sie die Abmessungen abrufen, müssen Sie daher die orientedPixelWidth- und die orientedPixelHeight-Eigenschaft anstelle von pixelWidth pixelHeight verwenden. Die orientedPixelWidth- und die orientedPixelHeight-Eigenschaft geben alle Änderungen der Abmessungen wieder, die das Ergebnis einer EXIF-Ausrichtung sind.