画像の選択方法と表示方法 (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" />
```
loadImage イベントハンドラーをボタンのクリックイベントに追加します。この例では、WinJS.UI.processAll 関数が完了したときにイベントハンドラーを追加します。イベントハンドラーをアタッチする最適な場所について詳しくは、「クイックスタート: HTML コントロールの追加とイベントの処理」をご覧ください。
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
次の手順では、loadImage イベントハンドラーを定義します。

ステップ 2: 画像の選択

ユーザーが画像を選択できるようにするには、JavaScript で新しい Window.Storage.Pickers.FileOpenPicker を作成し、その fileTypeFilter を、使用する画像の種類に設定します。FileOpenPicker を表示するには、pickSingleFileAsync メソッドを呼び出します。

pickSingleFileAsync は選択された画像のプロミスを返します。また、結果を処理する関数とエラー処理の関数を指定します (これらのメソッドは、このトピックの後の方で実装します)。

この例では、FileOpenPicker を作成および表示する loadImage という関数を定義します。この関数は、前の手順で定義した 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 メソッドを使って Blob を StorageFile から作成します。

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