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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA