Comment partager une image (applications Windows Runtime en JavaScript et HTML)

Applies to Windows and Windows Phone

Les images et les photos sont probablement les types de contenu que les utilisateurs partagent le plus. Nous allons vous montrer comment partager une image à partir de votre application.

Le code de cette section s’attache à l’utilisation de la méthode setBitmap pour partager une image bitmap. Souvent, les utilisateurs partagent des images qui sont représentées par des fichiers. C’est pourquoi nous recommandons que votre application prenne également en charge StorageItems, qui est une collection de fichiers. Nous décrivons comment prendre en charge StorageItems dans Comment partager des fichiers.

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Étape 1: Créer une fonction Gestionnaire de boutons pour permettre à l’utilisateur de choisir un fichier d’image

Le code de gestionnaire de boutons suivant permet à l’utilisateur de sélectionner un fichier d’image. Ce fichier est utilisé dans les dernières étapes de ce démarrage rapide.

  • Applies to Windows Phone

Remarque  

Le code suivant utilise pickSingleFileAsync. Sur Windows Phone 8.1, pickSingleFileAndContinue doit être utilisé à la place.


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

Étape 2: Configurer votre application en tant que source de partage

L’objet DataTransferManager est le point de départ principal de toute opération de partage. Ajoutez un gestionnaire d’événements DataRequested qui se déclenche quand l’utilisateur souhaite appeler le partage. Dans une application du Windows Store, cela se produit automatiquement quand l’utilisateur appelle l’icône Partager. Si vous développez une application pour Windows Phone, aucune icône Partager n’est intégrée, donc vous devez ajouter un contrôle sur lequel l’utilisateur peut appuyer pour déclencher le gestionnaire.


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


Les étapes restantes servent à implémenter la fonction shareImageHandler.

Étape 3: Obtenir un objet DataRequest

Lorsqu’un événement datarequested survient, votre application reçoit un objet DataRequest. Cet objet contient une classe DataPackage que vous pouvez utiliser pour fournir le contenu qu’un utilisateur souhaite partager.


var request = e.request;


Étape 4: Définir les propriétés de titre et de description


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

Étape 5: ajouter une miniature au DataPackage

Nous vous recommandons d’associer systématiquement une image miniature à une image partagée.


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

Pour plus d’informations sur les tailles de fichier recommandées pour les images miniatures, voir la rubrique de référence Thumbnail.

Étape 6: ajouter l’image en tant que bitmap au DataPackage

Pour partager une image, utilisez la méthode setBitmap. Cette méthode attend une image de type RandomAccessStreamReference. Pour partager plusieurs images, partagez-les plutôt au format storageItems. Nous décrivons comment prendre en charge storageItems dans Comment partager des fichiers. Ainsi, vous vous assurez que les utilisateurs auront accès au plus grand choix d’applications pour partager une image.


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


Remarques

Si votre application doit utiliser une opération asynchrone pour préparer l’image ou la miniature, vous devrez utiliser le schéma de report. Nous montrons comment procéder dans Comment effectuer des appels asynchrones dans votre gestionnaire datarequested.

Si votre application met plus de 200 millisecondes à préparer l’image, vous devez utiliser une fonction déléguée pour la partager. La procédure à suivre pour cela est décrite dans la section Comment prendre en charge les opérations Pull.

Exemple complet

Voici un exemple qui définit une image qu’un utilisateur souhaite partager. Pour obtenir un exemple plus complet, voir l’exemple de notre bibliothèque de code.


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

Rubriques associées

Exemple de partage de contenu source entre applications
Partage et échange de données
Comment partager des fichiers
Comment partager du contenu HTML
Comment partager un lien
Comment partager du texte
Démarrage rapide : partage de contenu
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

Afficher:
© 2014 Microsoft