So wird’s gemacht: Bearbeiten von Bildern (HTML)

  • Artikel

[ 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 ]

In diesem Thema erfahren Sie, wie ein vorhandenes Bild mit einem BitmapEncoder bearbeitet wird. Sie können mit einem BitmapEncoder Transformationen wie Skalieren und Zuschneiden durchführen, Metadaten und Eigenschaften festlegen und Pixel bearbeiten und dabei alle nicht bearbeiteten Daten beibehalten. Wir zeigen Ihnen, wie Sie einen BitmapEncoder mit den ursprünglichen Bilddaten initialisieren, eine oder mehrere Bearbeitungsaktionen durchführen und ihn dann speichern, sodass die ursprüngliche Datei aktualisiert wird.

Sie können mit einem BitmapEncoder auch ein neues Bild erstellen. Dies wird in So wird's gemacht: Codieren eines neuen Bilds erläutert.

Wissenswertes

Technologien

Voraussetzungen

Anweisungen

Schritt 1: Abrufen eines Decoderobjekts anhand des ursprünglichen Bilds

Schreiben Sie den Anfang einer Funktion, die ein BitmapEncoder-Objekt erhält, das mit der Bilddatei initialisiert wurde, und das Sie bearbeiten möchten, sowie den von der Datei geöffneten IRandomAccessStream. In diesem Beispiel wird das ursprüngliche Bild überschrieben, daher müssen Sie einen Stream verwenden, der mit ReadWrite-Rechten geöffnet wurde.

function (decoder, fileStream) {

Hinweis  Anweisungen zum Abrufen der Decoder- und Stream-Objekte finden Sie unter So wird's gemacht: Decodieren von Bildern.

 

Ändern Sie beim Aufruf von OpenAsync unbedingt den FileAccessMode-Parameter in ReadWrite.

Schritt 2: Initialisieren des Encoder-Objekts für die Bearbeitung

Erstellen Sie einen InMemoryRandomAccessStream als Ziel für die Codierung, und erstellen Sie mit der CreateForTranscodingAsync-Methode einen BitmapEncoder für die Transcodierung.

Verwenden Sie den InMemoryRandomAccessStream als temporären Speicherort zum Speichern der codierten Datei. Andernfalls würden der Decoder und Encoder gleichzeitig in demselben Stream lesen und schreiben. Dies würde nicht funktionieren.

    // Keep variables in-scope across multiple async 
    var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
    var encoder;

    Windows.Graphics.Imaging.BitmapEncoder
    .createForTranscodingAsync(memStream, decoder).then(function (_encoder) {
        encoder = _encoder;

Hinweis  CreateForTranscodingAsync unterstützt das Kopieren von Daten in ein Bild, das das ursprüngliche Format hat. Konvertierungen von einem Format in ein anderes sind nicht möglich.

 

Sie haben jetzt einen BitmapEncoder, der mit den Daten vom Quell-BitmapDecoder initialisiert wurde.

Schritt 3: Transformieren des Bilds

Nachdem der Encoder bereitsteht, können Sie eine Reihe von Aktionen durchführen, z. B. Metadaten und Pixeldaten festlegen. In diesem Beispiel wird das Bild mit der BitmapTransform-Methode skaliert und rotiert. Weitere Informationen zum Festlegen von Metadaten finden Sie unter So wird's gemacht: Schreiben von Bildmetadaten. Weitere Informationen zum Festlegen von Pixeldaten finden Sie unter So wird's gemacht: Codieren von neuen Bildern.

        // Scaling occurs before flip/rotation.
        encoder.bitmapTransform.scaledWidth = 640;
        encoder.bitmapTransform.scaledHeight = 480;

        // Fant is a relatively high quality interpolation algorithm.
        encoder.bitmapTransform.interpolationMode =
            Windows.Graphics.Imaging.BitmapInterpolationMode.fant;

        // Generate a new thumbnail from the updated pixel data.
        // Note: Only JPEG, TIFF and JPEG-XR images support encoding thumbnails.
        encoder.isThumbnailGenerated = true;

        encoder.bitmapTransform.rotation =
            Windows.Graphics.Imaging.BitmapRotation.clockwise90Degrees;

Hinweis  Wenn Sie den BitmapEncoder mit CreateForTranscodingAsync erstellen, wird der Encoder versuchen, alle ursprünglichen Daten verlustfrei zu kopieren. Wenn Sie beispielsweise eine JPEG-Datei transcodieren und Bildverarbeitungseigenschaften bearbeiten, aber keine Transformationen durchführen und die Pixeldaten nicht bearbeiten, wird das Bild verlustfrei kopiert. Wenn Sie jedoch Bildverarbeitung durchführen, indem Sie Pixeldaten vom Decoder abrufen und diese dann für den Encoder festlegen, ist dies notwendigerweise ein verlustbehaftetes Verfahren, da die Pixeldaten neu codiert werden müssen.

 

Schritt 4: Leeren des Encoders und Fehlerbehandlung

Wenn Sie die Arbeit mit dem Encoder beendet haben, leeren Sie ihn, um den Codierungsvorgang abzuschließen. Sie müssen auch den Fall behandeln, wenn das Bildformat nicht die Codierung von Miniaturansichten unterstützt. Wenn Sie wissen, dass Sie nur solche Bildformate bearbeiten, die wie JPEG Miniaturansichten unterstützten, können Sie diese Fehlerbehandlung überspringen.

        return encoder.flushAsync();
    }).then(null, function (error) {
        switch (error.number) {
            // If the encoder doesn't support writing a thumbnail, then try again
            // but disable thumbnail generation.
            case -2003292287: // WINCODEC_ERR_UNSUPPORTEDOPERATION
                encoder.isThumbnailGenerated = false;
                return encoder.flushAsync();
            default:
                throw error;
        }

Schritt 5: Speichern des codierten Bilds in der Datei und Bereinigung

Kopieren Sie zum Schluss den Inhalt des Streams im Arbeitsspeicher auf den Stream der ursprünglichen Datei und schließen Sie alle Streams.

    }).then(function () {
        // Overwrite the contents of the file with the updated image stream.
        memStream.seek(0);
        fileStream.seek(0);
        fileStream.size = 0;
        return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);
    }).done(function () {
        memStream.close();
        fileStream.close();
    });

Verwandte Themen

So wird's gemacht: Decodieren von Bildern

So wird's gemacht: Codieren von Bildern

So wird's gemacht: Schreiben von Bildmetadaten