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

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

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.

  • Applies to Windows Phone

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

Verwandte Themen

Beispiel zur Quell-App für die Inhaltsfreigabe
Freigeben und Austauschen von Daten
So wird's gemacht: Gemeinsames Nutzen von Dateien
Gemeinsames Nutzen von HTML
Gemeinsames Nutzen eines Links
So wird's gemacht: Freigeben von Text
Schnellstart: Teilen von Inhalt
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

Anzeigen:
© 2014 Microsoft