JavaScript のブロブ
この記事では、Blob オブジェクトについて学び、それが JavaScript ソース コードでどのように機能するかを見ていきます。 例を使用して、Blob が JavaScript でファイル データを保持する方法を確認します。
JavaScript のブロブ
JavaScript では、Blob を使用して、ファイルに格納されたオブジェクトとしてデータを保持します。 単純にデータをバイトのグループに保持し、単純なファイルのように独自のサイズを持ちます。
Blob のサイズとブラウザーの機能に応じて、Blob データはメモリとファイル システムに格納されます。 Blob のコンテンツを配列バッファーとして簡単に読み取ることができるため、Blob はデータをバイナリ形式で格納するのに適しています。
Blob のコンテンツを表示するには、HTML の <a>、<img>、またはその他の要素タグの URL として Blob を簡単に使用できます。
JavaScript での Blob オブジェクトの基本的な構文は次のとおりです。
var myBlob = new Blob(['Content of Blob'], {type: 'text/plain'});
コード例:
Blob は、Blob URL が指す createObjectURL() オブジェクトを使用して取得できます。
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Blob
</title>
</head>
<body>
<script>
let blobContent = new Blob(["DelftStack is a best website to learn programming!"],
{ type: 'text/plain' }); //blob file content and type
link.href = URL.createObjectURL(blobContent);
</script>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript Create Blob Object and Download File</h3>
<p>Click on link to to download the file</p>
<a download="dummyFile.txt" href='#' id="link">Download File</a> //file name
</body>
</html>
出力：
上記の HTML ソースで示したように、<script></script> タグ内に Blob オブジェクト blobContent を作成しました。 ファイルのコンテンツとコンテンツ タイプを定義しました。
createObjectURL() を使用して blobContent を URL として取得し、href にリンクします。 #href='#' と id=link のアンカー タグを使用して、ファイル dummy.txt をダウンロードしました。
上記のソースを HTML の拡張子を付けて保存し、ブラウザーで開いてから、ダウンロード ファイルのリンクをクリックして、ダウンロードを表示できます。 テキストファイルdummyFile.txtがあります。
JavaScript での Blob の利点
以下に、JavaScript で Blob オブジェクトを使用する利点をいくつか示します。
- ブロブは簡単に参照できます。
- より大きなバイナリ データ ファイルをデータベースに追加するには、ブロブが、大きなバイナリ データ ファイルを追加するための最適なオプションです。
- Blob を使用しながら、アクセス権を簡単に設定できます。
- データベースのバックアップには、ブロブの使用中のすべてのデータが含まれます。
Base64 へのブロブ
文字列ベースのデータをサーバーにアップロードする際に、JavaScript ファイル オブジェクトまたは Blob を Base64 文字列に変換すると便利です。 JavaScript を使用して、Base64 文字列と DataURL をファイル オブジェクトから変換できます。
Blob を Base64 でエンコードされた文字列に変換できます。そのエンコードは、バイナリ データを文字列として表します。 そして、このエンコーディングを data-urls で使用できます。
基本的な構文:
const convertBlobToBase64 = async (blob) => { // blob data
const reader = new FileReader();
let result = reader.readAsDataURL(blob);
}
ブロブから画像へ
JavaScript を使用して、画像または画像部分の Blob を作成できます。 canvas 要素を使用して、画像やそのパーツの作成などの画像操作を行います。
基本的な構文:
let myblob =
await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
BLOB から配列バッファーへ
任意のバッファー ソースを含め、Blob コンストラクターを使用すると、あらゆるものから Blob を生成できます。 blob.arrayBuffer() を使用して、Blob から最下位レベルの配列バッファーを生成できます。
基本的な構文:
const mybufferPromise = await myblob.arrayBuffer();