Blob

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

参考:

Blob | MDN

File

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

参考:

File | MDN

使い方

参考:

Blob と File クラスについて | JavaScript プログラミング講座 (hakuhin.jp)

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

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

Blob JavaScript API | JavaScripture

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

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

参考:

DataURI, Blob, File, (Array)Buffer をざっくり知る。- Qiita

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

DOM File API を chrome code で使う | MDN

URL.createObjectURL / URL.revokeObjectURL()

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

let url = URL.createObjectURL(blob);

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

URL.revokeObjectURL(url);

参考:

blob & createObjectURL について – Qiita

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

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

URL.createObjectURL() | MDN

URL.revokeObjectURL() | MDN

Blob / File から Data URI を作成する

参考:

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

Data URI から 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) { /* ... */ }
  let file = new File([new Uint8Array(data)], 'filename')
  // Use the file object here
})

参考:

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

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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です