Blobって

Blobって

Blob - MDN Web Docs - Mozilla
Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。File インターフェイスは Blob を基礎にしており

Blob

ArrayBuffer とビューは ECMA 規格、JavaScript の一部です。

ブラウザには、さらに File API に記載されている高水準のオブジェクトがあります。特に Blob です。

Blob はオプションの文字列 type (通常は MIMEタイプ) と blobParts – 一連の他の Blob オブジェクト、文字列や BufferSources から構成されます。

コンストラクタの構文は次の通りです:

new Blob(blobParts, options);

blobParts は Blob/BufferSource/String の値の配列です
options オプションのオブジェクト:
type – blob タイプ, 通常は例えば image/png のような MIME タイプです,
endings – blob が現在の OS の改行(\r\n or \n)に対応するように行末を変換するかどうかを意味します。デフォルトでは "transparent" (何もしません)ですが、 "native" (変換する)にすることもできます。

• Blob を base64 にする
  URL.createObjectURL の代替は blob を base64 エンコードされた文字列に変換する方法です。

• Image を blob にする
  画像、画像の一部、あるいはページのスクリーンショットの blob を作成することもできます。どこかにアップロードするときに便利です。

画像操作は 要素を通して行われます:

canvas.drawImage を使って、canvas 上で画像(または一部)を書きます。
blob を作成し、完了時に callback を実行する canvas メソッド .toBlob(callback, format, quality) を呼び出します。

• Blob から ArrayBuffer へ
  Blob コンストラクタは、BufferSource を含め、ほぼ何からでも blob を作成することができます。

しかし、低レベルの処理を実行する必要がある場合、FileReader を使って、最も低レベルである ArrayBuffer を取得することもできます。: