如何选择和显示图像 (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

介绍如何使用 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" />

向按钮的 click 事件中添加 loadImage 事件处理程序。以下示例在 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 返回对所选图像的承诺；为处理结果和处理错误各指定一个函数。我们将在本快速入门的后面部分实现这些方法。）

以下示例定义一个名为 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;
    }