Blobオブジェクト

Blobとは何かとその使用方法を確認してください

WebブラウザはBlobデータの保持を担当するオブジェクト。

Blobは「バイナリラージオブジェクト」を意味し、バイトのチャンクの不透明な表現です。

ブロブは多くのことに使用されます。

これらは、ネットワークのコンテンツから作成できます。それらはディスクに保存することも、ディスクから読み取ることもできます。これらは、の基礎となるデータ構造です。Fileで使用されるFileReaderたとえば、API。

ブロブはの間で送信できますWebワーカーそしてiFrameを使用してチャネルメッセージングAPI、およびを使用してサーバーからクライアントにプッシュAPI

ブロブは、URLを使用して参照することもできます。

BLOBに格納されているテキスト(またはバイト)を抽出でき、ブロブはIndexedDBに直接保存することもできます、およびそれらはそこからも取得できます。

私を参照してくださいIndexedDBチュートリアル

ブロブは、理解するための基本的なデータ型です。

ブロブを作成できます。

  • を使用してBlob()コンストラクタ
  • 別のblobから、Blob.slice()インスタンスメソッド

コンストラクターは値の配列を取ります。 BLOBに配置する文字列が1つしかない場合でも、それを配列でラップする必要があります。

例:

const data = new Blob(['Test'])

あなたは置く必要はありませんストリング値。あなたは合格することができます:

Blobコンストラクターは、MIMEタイプを表すオプションの2番目のパラメーターを取ります。

const data = new Blob(['Test'], { type: 'text/plain' })

Blobオブジェクトを取得したら、その2つのプロパティにアクセスできます。

  • sizeBLOBのコンテンツの長さをバイト単位で返します
  • typeそれに関連付けられたMIMEタイプ

そして、あなたはその唯一のメソッドを呼び出すことができます、slice()

あなたが電話するときslice()ブロブの一部を取得できます。

これは、バイト10から20までの新しいblobを作成する例です。aBlob

const partialBlob = aBlob.slice(10, 20);

BLOBをアップロードする

このコードは、入力タイプまたはドラッグアンドドロップへのコールバックとして使用されます。を使用してBLOBをURLにロードしますXHR、を使用してf進行状況を追跡する機能:

const uploadBlob = (url, blob, trackProgress) => {
	const xhr = new XMLHttpRequest()
	xhr.open('POST', url)
	xhr.send(blob)
	xhr.upload.onprogress = trackProgress
}

インターネットからblobとしてデータをダウンロードする

インターネットからデータをダウンロードし、次の構文を使用してBlobオブジェクトに保存できます。

const downloadBlob = (url, callback) => {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.responseType = 'blob'
<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> () =&gt; {
<span style="color:#a6e22e">callback</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">response</span>)
}

<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>(<span style="color:#66d9ef">null</span>)

}

BLOBURL

ブロブはURLを使用して参照することもできると述べました。

BLOB URLはブラウザによって生成され、内部参照です。与えられたblobを使用して、blobへのURLを生成できます。URL.createObjectURL()関数。

BlobURLはで始まりますblob://スキーム。

ブラウザがそのURLを確認すると、メモリまたはディスクに保存されている対応するBLOBを提供します。

BLOB URLはデータURLとは異なります(data:)、URLにデータを保存しないためです。また、ファイルURL(で始まる)とも異なります。file:)、ファイルパスなどの機密情報は公開されないためです。

存在しなくなったBlobURLにアクセスすると、ブラウザから404エラーが発生します。

BLOB URLを生成したら、それを削除して、URL.revokeObjectURL()そしてURLを渡します。

ページ上のローカルディスクからファイルをロードし、

このサンプルコードには、input画像を選択する要素。画像を選択したら、入力要素を削除して画像を表示します。また、画像の表示が完了したら、ブロブをクリアします。

<input type="file" allow="image/*"  />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const img = document.createElement(‘img’) const imageBlob = URL.createObjectURL(input.files[0]) img.src = imageBlob

<span style="color:#a6e22e">img</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {
  <span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">revokeObjectURL</span>(<span style="color:#a6e22e">imageBlob</span>)
}

<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">replaceChild</span>(<span style="color:#a6e22e">img</span>, <span style="color:#a6e22e">input</span>)

})

ブロブからの読み取り

ブロブに含まれるデータに直接アクセスすることはできません。

これを可能にするには、FileReaderオブジェクト

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: