Applications Windows
Réduire la table des matières
Développer la table des matières

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

Applies to Windows and Windows Phone

Les images et les photos sont des types de contenu que les utilisateurs aiment partager. Nous allons vous montrer comment recevoir une image qui est partagée par le biais de votre application.

Le code de cette section s’attache à l’utilisation de la méthode getBitmap pour obtenir une image bitmap. Souvent, les utilisateurs partagent des images qui ne sont pas dans ce format. C’est pourquoi nous recommandons que votre application prenne également en charge StorageItems, qui est une collection de n’importe quel type de fichiers. Nous décrivons comment prendre en charge StorageItems dans Comment recevoir des fichiers.

Ce que vous devez savoir

Technologies

Prérequis

  • Vous devez être familiarisé avec Visual Studio et ses modèles connexes.
  • Vous devez être familiarisé avec JavaScript.

Instructions

Étape 1: prendre en charge le contrat de partage

Avant que votre application puisse recevoir du contenu partagé, vous devez déclarer qu’elle prend en charge le contrat de partage. Ce contrat indique au système que votre application est disponible pour recevoir le contenu. Si vous utilisez un modèle Microsoft Visual Studio pour créer votre application, voici comment prendre en charge le contrat de partage :

  1. Ouvrez le fichier manifeste. Il doit normalement porter un nom similaire à package.appxmanifest.
  2. Ouvrez l’onglet Déclarations.
  3. Choisissez Partage cible dans la liste Déclarations disponibles.

Étape 2: indiquer que votre application prend en charge les bitmaps

Pour indiquer que votre application prend en charge le format de données bitmap :

  1. Ouvrez le fichier manifeste (package.manifest).
  2. Dans la section Formats de données, cliquez sur Ajouter.
  3. Tapez "bitmap" (sans les guillemets).

Les étapes précédentes ajoutent la section suivante au manifeste :


<Extensions>
  <Extension Category="windows.shareTarget">
    <ShareTarget>
      <DataFormat>bitmap</DataFormat>
    </ShareTarget>
  </Extension>
</Extensions>

Remarque  Vous pouvez spécifier un autre point d’entrée lorsque votre application est activée pour le contrat de partage cible. Pour ce faire, modifiez l’entrée de page Démarrage dans la section des paramètres Application de la déclaration Partage cible du manifeste du package. Nous vous recommandons d’utiliser également un fichier JavaScript distinct qui gère l’activation pour cette page. Par exemple, consultez l’Exemple de partage de contenu cible entre applications.

Étape 3: ajouter un gestionnaire d’événements pour savoir à quel moment votre application est activée

Quand un utilisateur sélectionne votre application pour partager du contenu, le système active votre application. Étant donné que cela peut se produire de différentes façons, vous devez ajouter à votre gestionnaire d’événements activated un code qui détecte la raison de l’activation de l’application. Pour ce faire, vérifiez la valeur de la propriété kind


app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        // The application has been launched. Initialize as appropriate.
    } else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
        ...
    }
};

Si vous utilisez une page de démarrage dédiée pour le contrat de partage cible, vous pouvez omettre de vérifier la propriété kind

Étape 4: Obtenez l’objet ShareOperation.

L’objet ShareOperation contient toutes les données dont votre application a besoin pour obtenir le contenu qu’un utilisateur souhaite partager.


shareOperation = args.detail.shareOperation;

Étape 5: retourner rapidement du gestionnaire d’événements activé.

Le gestionnaire d’événements activated doit retourner rapidement. Mettez en file d’attente un événement asynchrone provenant du gestionnaire d’événements activated pour que le traitement des données de partage ait lieu après le retour de l’événement activé.


WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });

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

Étape 6: vérifier si l’objet DataPackageView contient une bitmap

L’objet ShareOperation contient un objet DataPackageView. Cet objet est une version en lecture seule de l’objet DataPackage que l’application source a utilisé pour créer les données. Utilisez cet objet pour voir si le contenu partagé est disponible dans un format bitmap.


if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
    // Code to process bitmap goes here.
}


Vérifier si le DataPackage contient le format de données qui vous intéresse est une pratique recommandée, même si votre application ne prend en charge qu’un seul format. Cela facilite la prise en charge d’autres types de formats de données et de formats de fichiers ultérieurement.

Étape 7: obtenir l’image miniature, si elle est disponible

Les applications qui partagent des images incluent souvent des miniatures de ces images. Le code suivant vérifie s’il existe une miniature. Si c’est le cas, il ajoute la miniature en tant qu’élément dans un document HTML.


if (shareOperation.data.properties.thumbnail) {
    shareOperation.data.properties.thumbnail.openReadAsync().then(function (thumbnailStream) {
        var thumbnailUrl = URL.createObjectURL(thumbnailStream, {oneTimeOnly: true});
        // To display the thumbnail, you need an image element with id of "thumbnail"
        // in your HTML page.
        document.getElementById("thumbnail").src = thumbnailUrl;
    });
}

Étape 8: obtenir la bitmap

Pour obtenir la bitmap, appelez la méthode DataPackageView.getBitmapAsync.


shareOperation.data.getBitmapAsync().then(function (streamRef) {
    streamRef.openReadAsync().then(function (bitmapStream) {
        if (bitmapStream) {
            var imageUrl = URL.createObjectURL(bitmapStream, {oneTimeOnly: true});
            // In this sample, we only display the image. To do this,
            // you need an image element with id of "imageholder"
            // in your HTML page.
            // In your app, replace this with whatever is appropriate
            // for your scenario.
            document.getElementById("imageholder").src = imageUrl;
        }
    });
 });

Étape 9: appeler reportCompleted

Lorsque votre application a terminé de partager le contenu, appelez la méthode reportCompleted. Quand vous avez appelé cette méthode, le système masque votre application.


shareOperation.reportCompleted();


Remarques

Consultez notre exemple de code Exemple de partage de contenu cible entre applications pour observer l’intégralité de l’expérience d’une application recevant une image dans un contexte de partage.

Exemple complet


var shareOperation = null;

function shareReady(args) {
    if (shareOperation.data.properties.thumbnail) {
        shareOperation.data.properties.thumbnail.openReadAsync().then(function (thumbnailStream) {
            var thumbnailUrl = URL.createObjectURL(thumbnailStream, { oneTimeOnly: true });
            // To display the thumbnail, you need an image element with id of "thumbnail"
            // in your HTML page.
            document.getElementById("thumbnail").src = thumbnailUrl;
        });
    }
    if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
        shareOperation.data.getBitmapAsync().then(function (streamRef) {
            streamRef.openReadAsync().then(function (bitmapStream) {
                if (bitmapStream) {
                   var imageUrl = URL.createObjectURL(bitmapStream, { oneTimeOnly: true });
                   // In this sample, we only display the image. To do this,
                   // you need an image element with id of "imageholder"
                   // in your HTML page.
                   // In your app, replace this with whatever is appropriate
                   // for your scenario.
                   document.getElementById("imageholder").src = imageUrl;
                }
            });
        });
    }
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        // The app was launched.
        args.setPromise(WinJS.UI.processAll());
    } else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
        // This app was activated for share.
        args.setPromise(WinJS.UI.processAll());

        // We receive the ShareOperation object as part of the eventArgs.
        shareOperation = args.detail.shareOperation;

        // We queue an asynchronous event so that working with 
        // the ShareOperation object doesn't block or delay the 
        // return of the activation handler.
        WinJS.Application.addEventListener("shareready", shareReady, false);
        WinJS.Application.queueEvent({ type: "shareready" });
    }
 };

Rubriques associées

Exemple de partage de contenu cible entre applications
Partage et échange de données
Comment recevoir des fichiers
Comment recevoir du contenu HTML
Comment recevoir un lien
Comment recevoir du texte
Démarrage rapide : réception de contenu partagé
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share
Recommandations pour le débogage des applications cibles

 

 

Afficher:
© 2017 Microsoft