HTML 5のバイナリ大オブジェクトBlob(回転)

HTML 5のBlobオブジェクトとMYSQLのBLOBタイプは概念的に少し違います.MYSQLのBLOBタイプはバイナリコンテナにすぎません.HTML 5のBlobオブジェクトはバイナリデータを格納するほか、このデータのMINEタイプを設定することができます.これはファイルの格納に相当し、他の多くのバイナリオブジェクトもこのオブジェクトから継承されています.Blobのオブジェクトは、読み取り専用の元のデータを含むクラスファイルオブジェクトである.Blobオブジェクトのデータは、JavaScriptのオリジナル形式であるとは限らない.Fileインタフェースは、Blobに基づく、Blobの機能を継承し、ユーザコンピュータ上のローカルファイルを拡張サポートする.Blobのオブジェクトを作成する方法はいくつかあり、Blobのコンストラクタを呼び出すことができ、Blobのあるオブジェクトのslice() を使用して別のBlobのオブジェクトを切り出すこともできるし、canvasのオブジェクトのtoBlobのメソッドを呼び出すこともできる.
注意:一部のブラウザではslice() にはプレフィックスがあります.Firefox 12以前のバージョンではblob.mozSlice(), Safariではblob.webkitSlice() .
ツールバーの
属性名
を選択します.
説明size        unsigned long long Blob ( ) .読み取り専用type DOMString Blob MIME を示す文字列.タイプが不明な場合、この値は空の文字列です.読み取り専用
コンストラクタ

Blob Blob(
  [optional] Array parts,
  [optional] BlobPropertyBag properties
);

パラメータparts
追加する配列を含む配列Blob データ.配列要素は任意の複数であってもよいArrayBuffer,ArrayBufferView  (typed array),  Blob、またはDOMStringの対象.properties
オブジェクト、設定Blob .表示BlobPropertyBag節
方法
slice()
ソースBlobを含む新しいBlob オブジェクトを返す.

Blob slice(
  optional long long start,
  optional long long end,
  optional DOMString contentType
};

パラメータstart  
オプション
インデックスを開始します.負の数で、構文は配列に似ています.slice方法既定値は0です.end  
オプション
インデックスを終了します.負の数で、構文は配列に似ています.slice方法デフォルトは . contentType  
オプション
新しいBlob MIME ,という値は新しいものになりますBlob type , .
戻り値
ソースBlobを含む新しいBlob のオブジェクト.
に注意startのパラメータの値がソースBlob のsize よりも大きい場合、返されるBlobのオブジェクトのsize値は0である、つまりデータは含まれない.
BlobPropertyBag
2つの属性typeおよびendingsを含むオブジェクト.type
設定Blob type . endings( )
に対応BlobBuilder.append()メソッドのendingsパラメータ.このパラメータの値は「transparent」または「native」とすることができる.
Blobコンストラクション関数の使用例
次のコード:

var aFileParts = ["hey!"];
var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob

例:タイプ配列とBlobオブジェクトを使用してオブジェクトURLを作成する

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"}); //        MIME  
var url = URL.createObjectURL(blob);
//        blob:d3958f5c-0777-0845-9dcf-2cb28783acaf   URL   
//           URL     ,    img.src .

ブラウザの互換性
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
5
4
10
11.10
5.1 slice()
2110 webkit‡
135 moz‡
10
12
5.1 (534.29) webkit Blob()  constructor
20
13.0 (13.0)
10
12.10
6 (536.10)
注意:slice()の実装についてslice() はlength を用いる、新たな Blob への移行が必要であることを示す.パラメータ値start + length がソースBlob である場合、返されるBlobオブジェクトはstart からBlob を含む.
このバージョンのslice()はFirefox 4,WebKit,Opera 11.10に実装されている.しかし、この文法は私たちがよく使うArray.slice()およびString.slice()の文法とは異なるため、廃棄されている.GeckoとWebKitは現在、新版のslice文法をサポートしている.
Gecko 13.0(Firefox 13.0/Thunderbird 13.0/SeaMonkey 2.10)とChrome 21から、slice()はプレフィックスを削除します.
Geckoコメント
Gecko 12.0(Firefox 12.0/Thunderbird 12.0/SeaMonkey 2.9)の前に、パラメータslice()とstartの値が64ビットの符号なし数字の範囲を超えてはいけないというバグがあり、現在修復されている.
HTML 5のBlobオブジェクトの概要
HTML 5のBlobオブジェクトとMYSQLのBLOBタイプは概念的に少し違います.MYSQLのBLOBタイプはバイナリコンテナにすぎません.HTML 5のBlobオブジェクトはバイナリデータを格納するほか、このデータのMINEタイプを設定することができます.これはファイルの格納に相当し、他の多くのバイナリオブジェクトもこのオブジェクトから継承されています.現代のブラウザでは、このBlobオブジェクトはまだ正規化されていないため、BlobBuilderのような方法で作成する必要があります.しかし、Blobは現在、そのコンストラクタBlobを直接newして作成できるように規範化されており、ブラウザはほとんどこの方式をサポートしているので、古い基準にこだわる必要はありません.

var data='    ';
var blob=new Blob([data],{"type":"text/html"});
console.log(blob);

これにより、Blobオブジェクトを作成しました.Blobというコンストラクタのパラメータは奇妙で、最初のパラメータはデータのセットなので、配列でなければなりません.上記の例のように文字列が1つでも配列でなければなりません.2番目のパラメータはこのBlobオブジェクトの構成プロパティであり,現在では1つのtype,すなわち関連するMIMEのみが設定される必要があり,key-valueを使用する方法は今後の拡張のためかもしれない.では、データをBlobにするのに何の役に立つのでしょうか.Blobオブジェクトの場合、URLを作成して質問することができます.URLオブジェクトのcreateObjectURLメソッドを使用します.

var data='    ';
var blob=new Blob([data],{"type":"text/html"});
onload=function(){
  var iframe=document.createElement("iframe");
  iframe.src=URL.createObjectURL(blob);
  document.body.appendChild(iframe);
};

上記の例のtext/htmlだけでなく、ブラウザでサポートされているタイプでも使用できます.また、このBlob-URLのライフサイクルは、作成からドキュメントへの解放であり、リソースの浪費を招くことはありません.BlobはHTML 5の基本的なバイナリデータオブジェクトであり、多くの方法の操作パラメータがBlobの使用をサポートしているが、これは私には挙げられない.つまり,ほとんどのパラメータタイプがバイナリデータである方法ではBlobをパラメータとして使用することがサポートされている.そのため、データをBlobにすることで、その後の列の操作をより便利にすることができます.