webkitdirectoryとFile APIを使ってディレクトリにある画像を読み込んで<canvas>で表示するメモ

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
window.URL = window.URL || window.webkitURL;

document.getElementById("file").onchange = function(e) {
  var canvases = document.getElementById("canvases");
  var files = e.target.files;
  var imageLoadFunction = function(e) {
    var bb = new BlobBuilder();
    bb.append(e.target.result);

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    var image = new Image();
    image.src = window.URL.createObjectURL(bb.getBlob());
    image.onload = function(e) {
      context.canvas.width = 250;
      context.canvas.height = 250;
      context.drawImage(image, 0, 0, 250, 250);

      window.URL.revokeObjectURL(this.src);
    };

    canvases.appendChild(canvas);
  };

  for(var i = 0;i < files.length;i++) {
    var file = files[i];

    if(file.type.match(/^image/) === null) {
      continue;
    }

    var fr = new FileReader();
    fr.onload = imageLoadFunction;
    fr.readAsArrayBuffer(file);
  }
};