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

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

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

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

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

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

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

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

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

メソッド

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

CSS コード

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

ブロブスライス(

1. オプションのロングロングスタート、
2. オプションの長い長い端、
3. オプションの DOMString contentType
4. };

5. パラメータ
   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 = ["やあ!"];
   var oMyBlob = new Blob(aFileParts, {
   2. "type" : "text/xml" }) ; // ブロッブ
   は、

   
   と同等です。
   

   CSS コード

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

   1. var oBuilder = new BlobBuilder();
   var aFileParts = [
   2. "やあ!" ];
   oBuilder.append(aFileParts[0]);
   var oMyBlob = oBuilder.getBlob(
   4. "text/xml") // BLOB
   BlobBuilder インターフェイスは Blob オブジェクトを作成する別の方法を提供しますが、このメソッドは現在廃止されているため、使用しないでください。

   例: 配列型と Blob オブジェクトを使用してオブジェクト URL を作成します
   

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

   var typedArray = GetTheTypedArraySomehow();
   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 と同じように使用できます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 デザインと Modification_html5 チュートリアル スキルのいくつかのページ例を共有する次の記事：HTML5 デザインと Modification_html5 チュートリアル スキルのいくつかのページ例を共有する

関連記事

続きを見る

• AlloyTouch 全画面スクロール プラグインは 30 秒で滑らかな H5 ページを作成します
• HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）
• HTML5 Canvas 9での画像描画例を詳しく解説
• 正規表現と新しい HTML5 要素
• NodeJS と HTML5 を組み合わせて複数のファイルをドラッグ アンド ドロップしてサーバーにアップロードする方法