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

Applies to Windows and Windows Phone

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

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

您必須知道的事

技術

先決條件

指示

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

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

  • Applies to Windows Phone

附註  

下列程式碼使用 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());
    }
};

相關主題

分享內容來源應用程式範例
分享和交換資料
如何分享檔案
如何分享 HTML
如何分享連結
如何分享文字
快速入門:分享內容
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

顯示:
© 2015 Microsoft