HTML5_html5 チュートリアルスキルにおける Blob オブジェクトの使用の詳細な分析-H5 チュートリアル-php.cn

HTML5 の Blob オブジェクトと MYSQL の BLOB 型は概念的に異なります。 MYSQL の BLOB タイプは単なるバイナリデータコンテナです。 HTML5 の Blob オブジェクトは、バイナリデータを保存するだけでなく、このデータの MINE タイプを設定することもできます。これは、他の多くのバイナリオブジェクトもこのオブジェクトから継承します。
最新のブラウザの少し前のバージョンでは、この Blob オブジェクトは標準化されていないため、BlobBuilder などを使用して作成する必要があります。しかし今では、Blob は標準化され、新しいコンストラクター Blob によって直接作成できるようになり、ほとんどすべてのブラウザーがすでにこのメソッドをサポートしているため、古い標準について心配する必要はありません。

CSS コードコンテンツをクリップボードにコピーします

var data='次亜炭酸コバルト' ;
var blob=new Blob([data],{"type":"text/html" });
console.log(blob);

このようにして、Blob オブジェクトを作成します。Blob コンストラクターのパラメーターはかなり奇妙です。最初のパラメーターはデータのセットであるため、たとえ 1 つの文字列しかなくても、それは配列である必要があります。上の例では、数値を使用してアセンブルする必要があります。 2 番目のパラメーターは、この Blob オブジェクトの構成属性です。現在、キーと値のメソッドを設定する必要があるのは、関連する MIME の 1 つだけです。
それでは、データを Blob にすると何になるのでしょうか? Blob オブジェクトの場合は、それにアクセスするための URL を作成できます。 URL オブジェクトの createObjectURL メソッドを使用します。

CSS コードコンテンツをクリップボードにコピーします

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

上記の例の text/html だけでなく、ブラウザでサポートされている任意の型をこの方法で使用できます。さらに、この Blob-URL のライフサイクルは作成からドキュメントのリリースまでであるため、リソースの無駄が発生しません。

Blob は HTML5 の非常に基本的なバイナリデータオブジェクトです。すべてを列挙することはできませんが、多くのメソッドの操作パラメーターでサポートされています。つまり、パラメーターの型がバイナリデータであるほとんどすべてのメソッドは、Blob をパラメーターとして使用することをサポートしています。したがって、データを Blob に変換すると、その後の操作がより便利になります。

メソッド

スライス() ソース Blob オブジェクト内の指定された範囲内のデータを含む新しい Blob オブジェクトを返します。

CSS コード

コンテンツをクリップボードにコピーします

ブロブスライス(

オプションのロングロングスタート、
オプションの長い長い端、
オプションの DOMString contentType
};
パラメータ
start オプション
開始インデックスは負の数値にすることができます。構文は配列のスライスメソッドに似ています。デフォルト値は 0 です。
end オプション
end Index は負の数値にすることができます。構文は配列のスライスメソッドと同様です。
contentType オプションの
新しい Blob オブジェクトの MIME タイプです。新しい Blob オブジェクトの type 属性になります。値、デフォルトは空の文字列です。
戻り値
ソース Blob オブジェクト内の指定された範囲内のデータを含む新しい Blob オブジェクト。
の場合。 start パラメータの値がソース Blob よりも大きいです。オブジェクトの size 属性の値がまだ大きい場合、返される Blob オブジェクトのサイズ値は 0 です。これは、データが含まれていないことを意味します。

BlobPropertyBag
type とendings の 2 つの属性を含むオブジェクト。
type
は、Blob オブジェクトの type 属性を設定します (非推奨)
は、BlobBuilder.append() メソッドのendings パラメーターに対応します。このパラメーターの値は、「透過」または「ネイティブ」にすることができます。
Blob コンストラクターの使用例

次のコード:
CSS コード
コンテンツをクリップボードにコピーします
1. var aFileParts = ["やあ!"];
は、

と同等です。

CSS コード
コンテンツをクリップボードにコピーします

var oBuilder = new BlobBuilder();
var aFileParts = [
"やあ!" ];
oBuilder.append(aFileParts[0]);

var oMyBlob = oBuilder.getBlob(
"text/xml") // BLOB

BlobBuilder インターフェイスは Blob オブジェクトを作成する別の方法を提供しますが、このメソッドは現在廃止されているため、使用しないでください。
例: 配列型と Blob オブジェクトを使用してオブジェクト URL を作成します

CSS コード
コンテンツをクリップボードにコピーします
1. var blob = new Blob([typedArray], {type:
2. "application/octet-binary"}); // 適切な MIME タイプを渡します var
3. url = URL.createObjectURL(blob); // blob:d3958f5c-0777-0845-9dcf-2cb28783acaf のような URL 文字列が生成されます
4. // img.src
5. など、通常の URL と同じように使用できます。