如何分享影像 (使用 JavaScript 和 HTML 的 Windows 執行階段應用程式)

發行項
04/30/2014

Applies to Windows and Windows Phone

使用者分享的最普遍內容類型或許是影像和相片。這裡我們將會示範如何從您的應用程式分享單一影像。

本節中的程式碼重點放在如何使用 setBitmap 分享點陣圖影像。使用者通常會分享以檔案表示的影像。因此，建議您的應用程式也支援 StorageItems，這可以是檔案的集合。如需支援 StorageItems 的方法，請參閱如何分享檔案。

您必須知道的事

技術

Windows.ApplicationModel.DataTransfer

先決條件

您應該熟悉 Visual Studio 以及相關範本。
您應該熟悉 JavaScript。
您必須了解如何取得檔案和其他資料，例如使用 FileOpenPicker。您可以在快速入門：使用檔案選擇器存取檔案中了解詳細資訊。

指示

步驟 1: 建立按鈕處理常式函式，讓使用者選擇影像檔

下列按鈕處理常式程式碼可讓使用者挑選影像檔。這個快速入門的後續步驟都會用到這個檔案。

附註

下列程式碼使用 pickSingleFileAsync。在 Windows Phone 8.1 應該改用 pickSingleFileAndContinue。

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

步驟 2: 將您的應用程式設定成分享來源

DataTransferManager 物件是任何分享作業的主起點。新增一個要在使用者想要叫用分享時引發的 DataRequested 事件處理常式。在 Windows 市集應用程式中，當使用者叫用 [分享] 常用鍵時，就會自動引發這個事件。如果您開發的是 Windows Phone 應用程式，則沒有內建的分享常用鍵，所以您需要新增控制項，讓使用者可以輕觸並觸發處理常式。

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

剩餘的步驟是實作 shareImageHandler 函式。

步驟 3: 取得 DataRequest 物件

發生 datarequested 事件後，應用程式會收到 DataRequest 物件。這個物件有一個 DataPackage，您可以用它來提供使用者想分享的內容。

var request = e.request;

步驟 4: 設定標題和描述屬性

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

步驟 5: 將縮圖新增到 DataPackage

建議您分享影像時一律新增縮圖影像。

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

請參閱 Thumbnail 參考主題，了解我們對縮圖影像的建議檔案大小。

步驟 6: 將影像以點陣圖格式新增到 DataPackage

若要分享影像，請使用 setBitmap 方法。這個方法需要使用 RandomAccessStreamReference 類型的影像。若要分享多個影像，請改用 storageItems 分享影像。如需支援 storageItems 的方法，請參閱如何分享檔案。這樣有助於確保使用者分享影像時可以從大量的應用程式中選擇。

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

備註

如果您的應用程式需要使用非同步作業來準備影像或縮圖，則需要使用延遲模式。我們會在如何在 DataRequested 處理常式中進行非同步呼叫中示範該怎麼做。

如果您的應用程式需要 200 毫秒以上的時間來準備影像，您必須使用委派函式來分享影像。我們會在如何支援提取作業中教您如何完成。

完整範例

這裡是一個範例，它為使用者設定要分享的影像。如需更完整的範例，請參閱我們的程式碼庫範例。

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