Windows8ファイルシステム内の画像表示とメモリ（JS+HTML）その１

画像を管理するようなアプリを作っていて、ファイルシステムの画像を表示させたり等してたのでその時に大分ハマったメモリ周りについて少し書いていきます。

まず、Windows8アプリでファイルシステムの画像を表示させるとき

<img src="C:¥images¥test.jpeg" />

これだと表示できません。

この時点で大分マジかって感じだったんですけど。

どうやら一度ファイルを読み込んであげないといけないみたいなんですね！（セキュリティ対策だそうです。）
表示までのプロセスはここをみればだいたい分かる。
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465499.aspx
上がだいたい何をしてるかってのは、
FileOpenPickerでユーザに表示させたい画像を選ばせてるんですね。
見ていただきたいのはprocessResultの部分これは、ユーザが選んだファイルのStorageFile Classのオブジェクトを引数に取ってます。
表示させるためには、そのファイルオブジェクトからURL（パス）を生成してそれをimgタグのsrcに設定します。
こんな感じ。

/**この関数は、何かのイベントに引っ掛けるなりしてください例えばonClickとか **/
function loadImage(eventInfo) {

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

function processResult(file){
　　var img = document.createElement("img");
    var url = URL.createObjectURL(file);
　　img.src = url;
    URL.revokeObjectURL(url);
    document.body.appendChild(img);

}

で、URLを生成してsrcに設定したら必ずrevokeObjectURL(url)を必ず実行してください。
そうしないとメモリをどんどん食ってしまって大変なことになります。

で、ここまでなら公式ドキュメントを見ればいいのです
さて問題はここから。

先ほどまでにまぁだいたいの表示プロセスは分かりました。
表示したい画像のfileオブジェクトを取得
↓
fileオブジェクトからURLを生成
↓
imgタグのsrcにセット
まぁ大雑把にこんな感じです。
画像fileオブジェクトの取得の仕方はFileOpenPicker以外にもいろいろあると思います。
こんなのとか

var pictureLibraly = Windows.Storage.KnownFolders.picturesLibrary
pictureLibraly.getFileAsync("test.jpg").
then(file){
// what you want to do  with file object 
}

でこれは置いといて、
んじゃ、これをListViewと組み合わせて使ってみようか。⬅ここで大分ハマルんですね。

ちょっと長くなりそうなので次の投稿にしときます。