How to receive an image (HTML)
.png "Applies to Windows and Windows Phone")
A common kind of content that users want to share is images and photos. Here, we'll show you how to receive a single image that is shared to your app.
The code in this section focuses on using getBitmap to get a bitmap image. Often, users share images that aren't in this format. Therefore, we recommend that your app also support StorageItems, which can be a collection of any type of files. We describe how to support StorageItems in How to receive files.
What you need to know
Technologies
Prerequisites
- You should be familiar with Visual Studio and its associated templates.
- You should be familiar with JavaScript.
Instructions
Step 1: Support the Share contract.
Before your app can receive shared content, you have to declare that it supports the Share contract. This contract lets the system know that your app is available to receive content. If you're using a Microsoft Visual Studio template to create your app, here's how you support the Share contract:
- Open the manifest file. It should be called something like package.appxmanifest.
- Open the Declarations tab.
- Choose Share Target from the Available Declarations list.
Step 2: Specify that your app supports bitmaps.
To specify that you support bitmaps as a data format:
- Open the manifest file (package.manifest).
- In the Data Formats section, click Add New.
- Type "bitmap" (without the quotes).
The preceding steps add the following section to the manifest:
<Extensions>
<Extension Category="windows.shareTarget">
<ShareTarget>
<DataFormat>bitmap</DataFormat>
</ShareTarget>
</Extension>
</Extensions>
Note You can specify a different entry point when your app is activated for the Share Target contract. To do this, modify the Start page entry in App settings section of the Share Target declaration in the package manifest. We highly recommend that you also use a separate JavaScript file that handles activation for this page. For an example, check out the Sharing content target app sample.
Step 3: Add an event handler to detect when your app is activated.
When a user selects your app to share content, the system activates your app. Because there are many this can happen, you need to add code to your activated event handler that detects why the activation occurred. You do this by checking the value of the kind property.
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) {
...
}
};
If you use a dedicated start page for the Share Target contract, you can skip checking the kind property
Step 4: Get the ShareOperation object.
The ShareOperation object contains all the data your app needs to get the content that a user wants to share.
shareOperation = args.detail.shareOperation;
Step 5: Return from the activated event handler quickly.
The activated event handler must return quickly. Queue an asynchronous event from activated event handler so that share data processing takes placed after the activated event returns.
WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });
The remaining steps implement the shareReady function.
Step 6: Check to see if the DataPackageView contains a bitmap.
The ShareOperation object contains a DataPackageView object. This object is a read-only version of the DataPackage object that the source app used to create the data. Use this object to see if the content being shared is available in bitmap format.
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
// Code to process bitmap goes here.
}
Checking if the DataPackage contains the data format you are interested in is good practice, even if your app supports only one format. This makes it easier to support other data formats types and file formats later.
Step 7: Get the thumbnail image, if available.
Often, apps that share images include thumbnail versions of those images. The following code checks to see if a thumbnail exists. If so, it appends it as an element to an HTML document.
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;
});
}
Step 8: Get the bitmap.
To get the bitmap, call the DataPackageView.getBitmapAsync method.
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;
}
});
});
Step 9: Call reportCompleted.
After your app successfully finishes sharing the content, call reportCompleted. After you call this method, the system dismisses your app.
shareOperation.reportCompleted();
Remarks
Check out our Sharing content target app sample code sample to see the entire end-to-end experience of an app receiving an image as part of sharing.
Complete example
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" });
}
};
Related topics
Sharing content target app sample
Quickstart: Receiving shared content
Windows.ApplicationModel.DataTransfer