画像の選択方法と表示方法
目次を折りたたむ
目次を展開する

画像の選択方法と表示方法 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

Window.Storage.Pickers.FileOpenPickerBlob オブジェクトを使って、ユーザーが選択した画像を読み込んで表示する方法について説明します。

理解しておく必要があること

テクノロジ

必要条件

手順

ステップ 1: 画像の選択と表示のための要素の作成

  1. この例では、ユーザーがクリックすると FileOpenPicker が表示されるボタン、画像に関する情報を表示する段落、画像を表示するための img 要素を作成しています。

    
    <button id="selectImageButton">Select an image...</button>
    <p id="imageInformation"></p>
    <img id="imageControl" src="placeholder.png" alt="The selected image" />
    
    
  2. 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: 選択したファイルの処理

ユーザーが画像を選択し、成功したときに呼び出される関数を定義します。

  1. StorageFile をパラメーターとして受け取る関数を定義します。
    
    function processResults(file)
    {
    
    }
    
    
  2. ファイルが存在することを確認します。
    
    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."); 
        }
    }
    
    
  3. URL.createObjectURL メソッドを使って BlobStorageFile から作成します。
    
    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."); 
        }
    }
    
    
  4. 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."); 
        }
    }
    
    
  5. 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;
    }

 

 

表示:
© 2018 Microsoft