2023年 9月 の投稿一覧

【JavaScript】BlobオブジェクトをFileオブジェクトに変換する【中級者】

BlobオブジェクトをFileオブジェクトに変換する。
FileオブジェクトにはnameプロパティとlastModifiedプロパティが存在する。
BlobオブジェクトにはnameプロパティとlastModifiedプロパティが存在しない。

FileオブジェクトにはwebkitRelativePathが存在する。しかし、Blobオブジェクトには存在しない。
webkitRelativePath: ファイルが選択された場合に、ファイルの相対パスを表します。
他にもFileオブジェクトにあってBlobオブジェクトには存在しないプロパティある。

続きを読む

【JavaScript】画像をBlobオブジェクトに変換後にBlob URLを生成する(その2)【中級者】

次のコードでは、画像をBlobオブジェクトに変換後にBlob URLを生成する(その2)。

このコードは次の関数等を学習するためのコードである。
new Blob()で新しいBlobオブジェクト生成
URL.createObjectURL()関数
URL.revokeObjectURL()関数
async/await 非同期プログラミングを行うための構文
readAsArrayBufferメソッドでfileオブジェクトを読み込む。

続きを読む

【JavaScript】画像をBlobオブジェクトに変換後にBlob URLを生成する【中級者】

次のコードでは、画像をBlobオブジェクトに変換後にBlob URLを生成する。

このコードは次の関数等を学習するためのコードである。
fetch()関数
new Blob()で新しいBlobオブジェクト生成
URL.createObjectURL()関数
URL.revokeObjectURL()関数
async/await 非同期プログラミングを行うための構文
arrayBufferオブジェクトをBlobオブジェクトに変換する。
arrayBuffer()メソッドを使ってarrayBufferオブジェクトに生成する。

続きを読む

【JavaScript】画像の分解と再構成【中級者】

次のコードでは、指定したURLの画像を分解して再構成し、ブラウザに表示する。
fetch を使用して画像を取得し、Blobを使って画像を分割して再構成する。

このコードは次の関数等を学習するためのコードである。
fetch()関数
new Blob()で新しいBlobオブジェクト生成
URL.createObjectURL()関数
URL.revokeObjectURL()関数
async/await 非同期プログラミングを行うための構文

続きを読む

【JavaScript】ファイルの存在チェック(ネイティブ機能)【2023年最新版】

最新のファイルの存在チェック(ネイティブ機能)はこちら
【JavaScript】ファイルの存在チェック(ネイティブ機能)【2024年最新版】 (attacktube.com)

2023年現在、JavaScriptにおけるファイルの存在チェック方法は次の通り。
fetchメソッドとasync/awaitを使うとファイルの存在チェックを行うコードを書ける。
fetchメソッド: ES2015(ES6)で導入
async/await: ES2017(ES8)で導入

このコードはライブラリを使用せず、純粋なJavaScriptを使用して、指定されたファイルの存在を確認する。
ネイティブなJavaScriptの機能(fetch関数とasync/await)を利用して、指定されたファイルの存在を確認する。

続きを読む

【JavaScript】ArrayBufferオブジェクトをBlobオブジェクトに変換する【中級者】

ArrayBufferオブジェクトをBlobオブジェクトに変換は、「ArrayBufferオブジェクトが1つの場合」と「複数のArrayBufferオブジェクトが配列に格納されている場合」で方法が違うので注意すること。
ここはややこしく難しいところであるため、気を付けること。


// ArrayBufferオブジェクトが1つの場合
// arrayBuffer =  ArrayBuffer
// arrayBufferをBlob オブジェクトに変換する。
// ArrayBufferオブジェクトはfirefoxのコンソールには[object ArrayBuffer]と出る。
const blob = new Blob([arrayBuffer]);

// 複数のArrayBufferオブジェクトが配列に格納されている場合
// arrayBufferList = [ArrayBuffer,ArrayBuffer,ArrayBuffer,ArrayBuffer,ArrayBuffer・・・・]
// arrayBufferListをBlob オブジェクトに変換する。
// blobオブジェクトはfirefoxのコンソールには[object Blob]と出る。
const blob = new Blob(arrayBufferList);
続きを読む

【JavaScript】Typed Array(型化された配列)をArrayBufferオブジェクトに変換する【中級者】


Typed ArrayのUint8Arrayオブジェクトのbufferプロパティにアクセスする。これがArrayBufferオブジェクトである。
「Uint8Arrayオブジェクトのbufferプロパティへの参照 = ArrayBufferオブジェクト」
これがTyped ArrayからArrayBufferオブジェクトへの変換である。


const ua = Uint8Array.of(1,2,3,4,5,6)
// あるいは
// const ua = new Uint8Array([1,2,3,4,5,6])

const buf = ua.buffer

ua
// [1, 2, 3, 4, 5, 6]

buf
// ArrayBuffer {}
続きを読む