So wird’s gemacht: Codieren von neuen Bildern (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 ]

In dieser Anleitung wird beschrieben, wie Sie mit einem BitmapEncoder-Objekt ein Bild in einer Datei speichern. Informationen zum Ändern eines vorhandenen Bilds finden Sie unter So wird's gemacht: Bearbeiten von Bildern.

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.

Anweisungen

Schritt 1: Auswählen einer Zieldatei mit der Dateiauswahl

Mit FileSavePicker kann der Benutzer eine neue oder vorhandene Datei auf dem System auswählen. Nachdem Sie die Datei über die Dateiauswahl abgerufen haben, können Sie sie als Ziel für BitmapEncoder verwenden.

Erstellen Sie zuerst ein neues Dateiauswahlobjekt, legen Sie die Dateitypoptionen so fest, dass JPEG-Bilder zugelassen werden, und zeigen Sie die Auswahl für den Benutzer an.

// variables to store objects across multiple async operations
var encoder;
var fileType;
var stream;

var picker = new Windows.Storage.Pickers.FileSavePicker();
        
picker.fileTypeChoices.insert("JPEG file", [".jpg"]);
picker.defaultFileExtension = "jpg";
picker.suggestedFileName = "untitled";

picker.pickSaveFileAsync().then(function (file) {

            if (!file) {
                // The user did not select a file.
                return;
            }

            fileType = file. fileType;

Hinweis Sie können dem Dateitypfilter weitere Erweiterungen hinzufügen. Weitere Informationen finden Sie unter Windows.Storage.Pickers.

Hinweis Sie können mit Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator eine Liste der unterstützten Encoder und Dateierweiterungen abrufen.

Schritt 2: Erstellen eines Encoderobjekts für ein neues Bild

Wenn Sie eine Zieldatei haben, rufen Sie einen IRandomAccessStream mit ReadWrite-Zugriffsberechtigungen von der Datei ab, mit dem Sie dann BitmapEncoder instanziieren. Sie müssen auch die richtige Encoder-ID für den vom Benutzer ausgewählten Dateityp bestimmen. In diesem Beispiel sind nur JPEG-Bilder zulässig. Wenn Sie mehrere Dateitypen zulassen möchten, müssen Sie dies je nach dem FileType-Parameter der Datei ändern.

        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(function (_stream) {
        stream = _stream;
              stream.size = 0;

        var encoderId;
        switch (fileType) {
            case ".jpg":
                encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
                break;
        }
        return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
        }).then(function (encoder) {

Hinweis Die integrierten Encoder-IDs stehen als statische Member von BitmapEncoder zur Verfügung.

Wenn der Benutzer zum Speichern eine bereits vorhandene Datei auswählt, müssen Sie IRandomAccessStream.size auf 0 festlegen, da der BitmapEncoder einen leeren Ausgabestream benötigt.

Sie verfügen nun über einen BitmapEncoder, der ein leeres JPEG-Bild darstellt.

Schritt 3: Festlegen von Daten für den Encoder

Nachdem Sie nun über ein BitmapEncoder-Objekt verfügen, können Sie Metadaten und Pixeldaten festlegen sowie Miniaturansichten und Transformationen wie Drehung und Skalierung steuern.

In diesem Codebeispiel wird lediglich ein einfaches Pixeldatenarray festgelegt. Weitere Informationen zu Bildverarbeitungseigenschaften und Metadaten finden Sie unter So wird's gemacht: Schreiben von Bildmetadaten.

            // An array representing 2x2 red, opaque pixel data
            var pixels = [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255];

            encoder.setPixelData(
                Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
                Windows.Graphics.Imaging.BitmapAlphaMode.straight,
                2, // pixel width
                2, // pixel height
                96, // horizontal DPI
                96, // vertical DPI
                pixels
                );

Hinweis Wenn Sie einen BitmapEncoder mit der CreateAsync-Methode erstellen, müssen Sie mindestens Pixeldaten mit der SetPixelData-Methode bereitstellen, um ein gültiges Bild zu erstellen.

Schritt 4: Speichern der Änderungen in der Datei

Wenn Sie die Bearbeitung des BitmapEncoder abgeschlossen haben, müssen Sie den Encoder löschen und den zugrunde liegenden Stream schließen, bevor Sie die Datei verwenden. Andernfalls wird das Bild nicht gespeichert, und die Daten gehen verloren.

Behandeln Sie abschließend alle auftretenden Fehler. Wenn Sie versuchen, eine Codierungsaktion auszuführen, die nicht vom Dateiformat unterstützt wird oder auf andere Art unzulässig ist, erhalten Sie bis zum Aufruf von FlushAsync einen Fehler. So führt FlushAsync beispielsweise zu einem Fehler, wenn Sie versuchen, eine Miniaturansicht durch Festlegen von IsThumbnailGenerated auf "True" in einem Format wie BMP (das keine Miniaturansichten unterstützt) zu speichern.

        return encoder.flushAsync();
        }).then(function () {
            // This means the encoder saved successfully.
        }, function (error) {
            // There was an error encoding, error.message has the error string.
        }).done(null, function () {
            // Close the stream regardless of whether encoding was successful. Otherwise it will continue to be locked for Read/Write access.
            stream && stream.close();
        });
 }

Hinweis Beim Aufrufen der FlushAsync-Funktion wird der Encoder gespeichert. Sie müssen den Encoder erneut erstellen, wenn weitere Aktionen ausgeführt werden sollen. Wenn Sie den Encoder später verwenden möchten, rufen Sie FlushAsync erst dann auf, wenn die Arbeit mit dem Encoder beendet ist.