Blobって
Blob - MDN Web Docs - Mozilla
Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。File インターフェイスは 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 を取得することもできます。: