【JavaScript】画像のバイナリデータとは？JavaScriptで画像に変換する方法

JavaScript(ジャバスクリプト)

2023.08.042023.08.05

画像のバイナリデータとは？
バイナリデータの具体例
バイナリデータをJavaScriptで画像に変換する
HTML側の表示
まとめ

画像のバイナリデータとは？

画像のバイナリデータとは、画像をコンピュータで処理するために使用されるバイナリ形式のデータです。バイナリデータは、0と1のビットの組み合わせで表現される情報です。画像は、ピクセルと呼ばれる小さな点の集合体で構成されており、それぞれのピクセルには色や明るさの情報が含まれています。

画像のバイナリデータは、通常、画像ファイルの形式によって異なる構造を持ちます。一般的な画像ファイル形式には、JPEG、PNG、GIFなどがあります。これらのファイル形式は、画像データをバイナリ形式でエンコードし、保存します。

バイナリデータは、コンピュータが直接理解できる形式であり、画像をメモリ内で表現するために使用されます。画像のバイナリデータを読み込むことで、画像を表示したり、画像処理を行ったりすることができます。また、バイナリデータを変更することで、画像を編集することも可能です。

一般的に、画像のバイナリデータは、16進数やバイト列などの形式で表現されます。各バイトは、ピクセルの色やその他の画像情報を表す数値と対応しています。

バイナリデータの具体例

具体的な例を挙げると、以下のようなバイナリデータが画像を表現する際に使用されます（16進数表記）

FF D8 FF E0 00 10 4A 46 49 46 00 01 01 00 00 48 00 48 00 00 FF ED 00 50 68 6F 74 6F 73 68 6F 70 20 33 2E 30 00 38 42 49 4D 04 04 00 00 00 00 00 18 E2 24 00 00 00 00 FF DB 00 43 00 02 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 ... ... ... ...

バイナリデータをJavaScriptで画像に変換する

以下は、HTMLファイル内に画像を表示するためのJavaScriptコードです。

    const fileInput = document.getElementById('file-input');
    const imageElement = document.getElementById('image-element');
    const logElement = document.getElementById('log');

    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (loadEvent) => {
          const binaryData = new Uint8Array(loadEvent.target.result);
          const blob = new Blob([binaryData], { type: file.type });
          const imageUrl = URL.createObjectURL(blob);
          imageElement.src = imageUrl;
          logElement.innerHTML = `ファイル名: ${file.name}, サイズ: ${file.size} bytes, タイプ: ${file.type}`;
        };

        reader.readAsArrayBuffer(file);
      }
    });

fileInput要素にchangeイベントリスナーが追加されています。つまり、ファイルの選択が行われた時に指定した関数が実行されます。

選択されたファイルは、event.target.files[0]を通じて取得されます。if (file)の条件を満たす場合、ファイルが選択されていることを確認しています。

FileReaderオブジェクトを作成し、readAsArrayBuffer()メソッドを使用してファイルをバイナリデータとして読み込みます。

ファイルの読み込みが完了したときに実行されるonloadイベントリスナー内では、loadEvent.target.resultを使用してバイナリデータを取得します。

そして、そのバイナリデータを使用してBlobオブジェクトを作成し、そのURLをimageElement.srcに設定して画像を表示します。

HTML側の表示

HTML側には下記のように作成して画像を表示できます。

ログ要素のinnerHTMLには、ファイルの詳細情報が表示される文字列テンプレートが設定されます。

<input type="file" id="file-input" accept="image/*">
  <p>画像を表示する</p>
  <img id="image-element" alt="画像">
  <div id="log"></div>

ログには、ファイルの名前、サイズ、およびタイプが表示されます。

まとめ

実際のアプリケーションでは、サーバーからバイナリデータを取得したり、他の方法でバイナリデータを生成したりすることが一般的です。

ご参考ください。