如何選取和顯示影像 (HTML)
[ 本文的目標對象是撰寫 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;
}