Blob [HTML]

Blob

不可変な生データを表すオブジェクト

参考：

Blob | MDN

使い方

参考：

Blob と File クラスについて | JavaScript プログラミング講座

フロントエンドでバイナリファイルを扱うための Blob オブジェクトと File オブジェクト | 30歳からのプログラミング

Blob の使い方とダウンロード／保存方法まとめ！ | 侍エンジニア塾ブログ

Blob JavaScript API | JavaScripture

File

ファイルシステム上のデータを扱うように拡張された Blob オブジェクト

参考：

File | MDN

Web アプリケーションで File を使う

• ファイルを選択する
• ドラッグアンドドロップ
• 選択した画像ファイルのサムネイルを表示する
• Blob URL を生成する
• 選択したファイルをアップロードする (同期 / 非同期)

参考：

DataURI、Blob、File、ArrayBuffer をざっくり知る – Qiita

ウェブアプリケーションからのファイルの使用 | MDN

DOM File API を Chrome コードで使う | MDN

URL.createObjectURL / URL.revokeObjectURL()

Blob オブジェクトを表す URL を生成する。

const url = URL.createObjectURL(blob);Code language: JavaScript (javascript)

使用後に不要になったオブジェクト URL を解放する。

URL.revokeObjectURL(url);Code language: JavaScript (javascript)

参考：

createObjectURL について – Qiita

URL.createObjectURL() – オブジェクトの URL を作成する | SYNCER

createObjectURL がすごい件 | プログラムモグモグ

URL.createObjectURL() | MDN

URL.revokeObjectURL() | MDN

Blob / File からデータ URL を作成する

参考：

JavaScript で Blob / File から Data URI を作成する方法 | SYNCER

データ URL から Blob / File を作成する

参考：

JavaScript で Data URI から Blob / File を作成する方法 | SYNCER

Convert Data URI to File then append to FormData – Stack Overflow

Blob を File に変換する

参考：

How to convert Blob to File in JavaScript – Stack Overflow

データを変換する

参考：

Blob、ArrayBuffer、Uint8Array、DataURI の変換 | NER

Node.js でローカルファイルから File オブジェクトを作成する

バッファーから Uint8Array を作成して File のコンストラクターに渡す。

fs.readFile('/path/to/file', (err, data) => {
    if (err) { /* ... */ }
    const file = new File([new Uint8Array(data)], 'filename');
    // Use the file object here
})Code language: JavaScript (javascript)

参考：

new Blob([buffer]) crashes renderer when buffer = Buffer.from(‘…’, ‘base64) and buffer.length >= 4096 · Issue #20750 · electron/electron – GitHub

Open local file in electron and render in wavesurfer.js – Stack Overflow

ArrayBuffer

参考：

ArrayBuffer クラスについて | HAKUHIN’s Home Page

ArrayBuffer について調べてみた – Qiita

ArrayBuffer でバイナリデータを扱う | JavaScript 入門

ArrayBuffer について | プログラミングマガジン

JS の ArrayBuffer がよくわからなかったのでほんの少しだけ調べた | はらへり日記

ArrayBuffer – Binary Arrays | 現代の JavaScript チュートリアル

ArrayBuffer | MDN

コード：

String と ArrayBuffer の相互変換 JavaScript (kawanet) – GitHub Gist

blob

クロスブラウザで利用できる Blob のラッパーモジュール

リポジトリ：

amitport/blob: A cross-browser Blob that falls back to BlobBuilder when appropriate – GitHub

入手：

blob – npm

参考：

How do I create a Blob in Node.js? – Stack Overflow

Cross Blob

クロスプラットフォームで利用できる Blob の実装

リポジトリ：

Richienb/cross-blob: Cross-platform Blob implementation for Node.js and the Web – GitHub

入手：

cross-blob – npm

参考：

Node.js can’t create Blobs? – Stack Overflow

file-api

**NOT MAINTAINED**

Node.js 上で HTML5 File API を使用するためのライブラリ

リポジトリ：

node-file-api/file-api: HTML5 FileAPI for Node.js – GitHub

入手：

file-api – npm