如何選取和顯示影像 (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何使用 Window.Storage.Pickers.FileOpenPicker 與 Blob 物件載入並顯示使用者選取的影像。

您必須知道的事

技術

先決條件

您必須能夠使用 JavaScript 建立基本的 Windows 市集應用程式。如需詳細資訊，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。

指示

步驟 1: 建立用於選取並顯示影像的元素

這個範例會建立使用者按一下就可以啟動 FileOpenPicker 的按鈕、用於顯示影像相關資訊的段落，以及用於顯示影像的 img 元素。

<button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />

將 loadImage 事件處理常式新增到按鈕的 Click 事件。這個範例會在 WinJS.UI.processAll 函式完成時，新增事件處理常式。(如需應該附加事件處理常式之位置的詳細資訊，請參閱快速入門：新增控制項和處理事件)。
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
您要在下一個步驟定義 loadImage 事件處理常式。

步驟 2: 選取影像

若要讓使用者選取影像，請在 JavaScript 中建立新的 Window.Storage.Pickers.FileOpenPicker，並將其 fileTypeFilter 設定為您要提供的影像類型。若要顯示 FileOpenPicker，請呼叫 pickSingleFileAsync 方法。

pickSingleFileAsync 會為選取的影像傳回 Promise；指定一個處理結果的函式，以及一個處理錯誤的函式。(我們稍後會在這個主題中實作這些方法。)

這個範例會定義一個 loadImage 函式，這個函式會建立並顯示 FileOpenPicker。當使用者按一下您在上一個步驟中定義的 selectImageButton 時，會呼叫此函式。

function loadImage(eventInfo) {

    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().then(processResults, displayError);
}

步驟 3: 處理選取的檔案

定義使用者成功選取影像時呼叫的函式。

定義採用 StorageFile 做為參數的函式。
```
function processResults(file)
{

}
```

確認該檔案存在。

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {

    } else {
        displayError("An image wasn't selected."); 
    }
}

使用 URL.createObjectURL 方法，從 StorageFile 建立 Blob。

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);

    } else {
        displayError("An image wasn't selected."); 
    }
}

使用 Blob 設定 img 元素的 src 屬性。這個範例也會顯示所選影像的檔案名稱。

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

    } else {
        displayError("An image wasn't selected."); 
    }
}

釋出 Blob。

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

        // Release the blob resources.
        URL.revokeObjectURL(imageBlob);
    } else {
        displayError("An image wasn't selected."); 
    }
}

步驟 4: 處理錯誤

實作通知使用者發生錯誤的方法。它會接受錯誤訊息當作參數。

    function displayError(error) {
        if (imageBlob) {
            URL.revokeObjectURL(imageBlob);
        }
        document.getElementById("imageInformation").innerText = error;
    }

Share via