So wird's gemacht: Teilen von Bildern (Windows-Runtime-Apps mit JavaScript und HTML)

Artikel
04/30/2014

Applies to Windows and Windows Phone

Der am häufigsten von Benutzern freigegebene Inhaltstyp sind vermutlich Bilder und Fotos. Im Folgenden wird beschrieben, wie Sie ein Bild in Ihrer App freigeben.

Der Code in diesem Abschnitt zeigt, wie setBitmap zum Freigeben eines Bitmapbilds verwendet wird. Häufig teilen Benutzer Bilder, die als Dateien vorliegen. Daher sollte die App auch die StorageItems-Auflistung unterstützen, bei der es sich um eine Auflistung von Dateitypen handeln kann. Die Vorgehensweise zum Unterstützen von StorageItems wird unter So wird's gemacht: Teilen von Dateien beschrieben.

Wissenswertes

Technologien

Windows.ApplicationModel.DataTransfer

Voraussetzungen

Sie sollten mit Visual Studio und den zugehörigen Vorlagen vertraut sein.
Sie sollten mit JavaScript vertraut sein.
Sie sollten nachvollziehen können, wie Dateien und andere Daten abgerufen werden (z. B. mithilfe von FileOpenPicker). Weitere Informationen finden Sie unter Schnellstart: Dateizugriff mit Dateiauswahl.

Anweisungen

Schritt 1: Erstellen einer Schaltflächen-Handlerfunktion, mit der der Benutzer eine Bilddatei auswählen kann

Mithilfe des folgenden Schaltflächen-Handlercodes kann der Benutzer eine Bilddatei auswählen. Diese Datei wird in den verbleibenden Schritten dieses Schnellstartartikels verwendet.

Hinweis

Der folgende Code verwendet pickSingleFileAsync. Unter Windows Phone 8.1 muss stattdessen pickSingleFileAndContinue verwendet werden.

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

Schritt 2: Einrichten der App als Freigabequelle

Das DataTransferManager-Objekt ist der wichtigste Ausgangspunkt für alle Teilungsvorgänge. Fügen Sie einen DataRequested-Ereignishandler hinzu, der ausgelöst wird, wenn der Benutzer "Teilen" aufrufen möchte. In Windows Store-Apps erfolgt dies automatisch, wenn der Benutzer den Charm „Teilen“ aufruft. Wenn Sie für Windows Phone entwickeln, ist der Charm „Teilen“ nicht integriert, d. h., Sie müssen ein Steuerelement hinzufügen, auf das der Benutzer tippen und den Handler auslösen kann.

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareImageHandler);

Die verbleibenden Schritte dienen der Implementierung der shareImageHandler-Funktion.

Schritt 3: Abrufen eines DataRequest-Objekts

Wenn ein datarequested-Ereignis auftritt, erhält Ihre App ein DataRequest-Objekt. Dieses Objekt enthält ein DataPackage, mit dem Sie den Inhalt bereitstellen können, den der Benutzer teilen möchte.

var request = e.request;

Schritt 4: Festlegen der Kachel- und Beschreibungseigenschaften

request.data.properties.title = "Share Image Example";
request.data.properties.description = "Demonstrates how to share an image.";

Schritt 5: Hinzufügen einer Miniaturansicht zum DataPackage

Wir empfehlen, beim Freigeben von Bildern immer ein Miniaturbild hinzuzufügen.

request.data.properties.thumbnail = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);

Informationen zu den empfohlenen Dateigrößen für Miniaturbilder finden Sie im Referenzthema Thumbnail.

Schritt 6: Hinzufügen des Bilds zum DataPackage als Bitmap

Verwenden Sie zum Teilen eines Bilds die setBitmap-Methode. Diese Methode erwartet, dass das Bild den Typ RandomAccessStreamReference aufweist. Um mehrere Bilder zu teilen, teilen Sie sie stattdessen als storageItems. Die Vorgehensweise zum Unterstützen von storageItems wird unter So wird's gemacht: Teilen von Dateien beschrieben. Dadurch können Sie sicherstellen, dass dem Benutzer beim Teilen des Bilds die größtmögliche Anzahl von Apps zur Auswahl steht.

request.data.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile));

Anmerkungen

Wenn für die App ein asynchroner Vorgang zum Vorbereiten des Bilds oder des Miniaturbilds erforderlich ist, müssen Sie das Verzögerungsmuster verwenden. Die entsprechende Vorgehensweise wird unter So wird's gemacht: Ausführen von asynchronen Aufrufen im datarequested-Handler gezeigt.

Falls das Vorbereiten des Bilds in Ihrer App länger als 200 Millisekunden dauert, können Sie ggf. eine Delegatfunktion zum Freigeben verwenden. Die Vorgehensweise dafür finden Sie unter So wird's gemacht: Unterstützen von Pullvorgängen.

Vollständiges Beispiel

Das folgende Beispiel zeigt, wie ein Bild zur Freigabe durch einen Benutzer festgelegt wird. Ein ausführlicheres Beispiel finden Sie in unserer Codegalerie.

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

function shareImageHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share Image Example";
    request.data.properties.description = "Demonstrates how to share an image.";

    // In this example, we use the imageFile for the thumbnail as well.
    request.data.properties.thumbnail = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
    request.data.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile));
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app was newly launched; register it as share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", shareImageHandler);
            // Set up the button handler to pick an image file.
            document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};