検索
ホームページウェブフロントエンドH5 チュートリアル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");
  5. iframe.
  6. src=URL.createObjectURL(blob); document.body.appendChild(iframe);
  7. };
上記の例の 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 = ["やあ! a>"];
    2. var oMyBlob = new Blob(aFileParts, {
    3. "type" : "text/xml" }) ; // ブロッブ
    は、


    と同等です。

    CSS コード
    コンテンツをクリップボードにコピーします
    1. var oBuilder = new BlobBuilder();
    2. var aFileParts = [
    3. "やあ!" ];
    4. oBuilder.append(aFileParts[0]);
    5. var oMyBlob = oBuilder.getBlob(
    6. "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 までご連絡ください。
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール