Blobについて

File APIの一部で、大きなデータを扱う仕組み

Base64されたDataURLだと、大きすぎて、タグの属性のやり取りで時間かかる。 ArrayBufferのままだと、渡す仕組みがない。

例えば、動画ファイルをアップロードした場合、それがBlobになる。そして、BlobのURLを取り出す仕組みを使うと、videoタグにBlob-URLを渡して再生できる。

あるいは、JavaScript中でZipファイルを作成して、それをBlobにすれば、リンクからダウンロードできるようにも出来る。

パソコン内に大きなデーターを保存できるFileSystem API(Chromeのみ対応)もBlob経由で行う。

IndexedDBも新しいのはBlobに対応して、バイナリーデーターを保存可能になった。

FileEntryも多少似てるけど、こちらは、ファイル名とかパスとかがあり、原則、ユーザーが作成できない。ファイルをアップロードしたり、FileSystemに保存されたデーターを読み込むことで作成される。

注意事項

Chromeの場合500MBほどのサイズを超えると、正常に動作しない。 https://code.google.com/p/chromium/issues/detail?id=375297

Blobを作成しても、グローバルに置かないと、ガーベージコレクションに回収されて消える。

グローバルなBlobを消すには、nullを代入と、revokeObjectURL()の２つ必要かもしれない。

BlobのURLの作成の仕方

window.webkitURL || window.URL から createObjectURL(blob)

Blobの作成の仕方

テキストからBlob作成

new Blob([text],{type:"text/plain;charset=UTF-8"});

arraybufferやuint8arrayからBlob作成

new Blob(array);

base64uri:canvas.toDaraURL()から

var BASE64_MARKER = ';base64,';
      var index=dataURI.indexOf(BASE64_MARKER);
      var base64Index=0;
      if(index!=-1){
           base64Index=index  + BASE64_MARKER.length
      }
      var base64 = dataURI.substring(base64Index);
      var raw = atob(base64);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);

      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
 new Blob([uInt8Array],{type:type});

アップロードしたファイルから

filesはblobの配列といっていい。

ファイルアップロードの場合

event.target.files

ファイルをドロップした場合

event.dataTransfer.files

JSZipから

typeにblobがあるので、APIを参照

jszip.generate(type:"blob")