JavaScriptでイメージのテキストバイナリ表現を作成するにはどうすればよいですか？

Question

小さなプロジェクトでは、イメージをバイナリ表現（0と1）に変換したいと思います。 PHP、.NETを実行するように設定されていないマシンでこれを使用したいので、JavaScriptでこれを行いたいと思います。

現時点で私はFileReaderを使ってファイルを読むことができました。これは私にArrayBufferを与えます。

しかし、このArrayBufferをどのようにビット表現に変換するかはわかりません。

このjsfiddleに私の現在のバージョンがあります。

function ArrayBufferToBit(buffer) { 
    // How to convert my array buffer to a textual bit-representation? 0 1 1 0 0 0... 
    return buffer; 
    } 

ご協力いただきありがとうございます。

Answer 1

使用することはDataView：

function ArrayBufferToBit(buffer) { 
    var dataView = new DataView(buffer); 
    var response = "", offset = (8/8); 
    // I assume we will read the entire file as a series of 8-bit integers, 
    // i.e. as a byte, hence my choice of offset. 
    for(var i = 0; i < dataView.byteLength; i += offset) { 
     response += dataView.getInt8(i).toString(2); 
     // toString is the secret sauce here. 
    } 
    return response; 
} 

Dataview sがあなたが読み取り/数値データを書いてみましょう。 getInt8は、バイト位置（ここでは0）からArrayBufferの値を符号付き8ビット整数表現に変換し、toString(2)は8ビット整数を2進表現形式（つまり1と0の文字列）に変換します。

「マジック」オフセット値は、ファイルとして8ビットの整数として8ビットの整数表現でバイトとして格納されているとみなして得られます。バイト保存された（すなわち8ビットの）ファイルを32ビット整数に読み込もうとすると、32/8 = 4がバイトスペースの数であり、バイトオフセット値になります。

---

これは、配列を入力することに加えて、ArrayBufferから読み取り/書き込みするrecommended wayある：

ArrayBufferオブジェクトは、汎用、固定長の生のバイナリデータバッファを表すために使用されます。 ArrayBufferの内容を直接操作することはできません。その代わりに、型指定された配列オブジェクトの1つ、またはバッファを特定の形式で表すDataViewオブジェクトを作成し、それを使用してバッファの内容を読み書きします。符号付き8ビット表現に加えて

、あなたも（float64あるいはint32のような）表現の多様性を得ることができます。表現の選択は重要ではありません。toString(2)はバイナリ形式で表示されます（ただし、バイナリ文字列の長さは明白な理由で必ず変更されます）。

この例では、ファイル全体を一連の8ビット整数、つまり1バイトずつ読み込むことを選択しました。しかし、一般的にDataViewは、の同種のタイプの混合を容易にします。最初の12バイトを32ビットの整数として、残りを64ビットとして読み取ることができます。 DataViewは通常、異なるファイル形式をこのように扱うことができ、DataViewも異なるアーキテクチャのファイルのエンディアンを処理するため、ファイルを処理するときに優先されます。

このようなタスクに@ le_mの回答のように、またはDataView Sにより、型指定された配列で扱うことができます - 問題とは別のファイル（ファイルが別のCPUからネットワーク上で転送されている場合）ただし、DataView sが両方のエンディアンを扱うことができますフォーマット（例：主な内容の前にいくつかのバイトヘッダーを持つPDFファイル）。

Answer 2

配列バッファの内容を反復処理する必要があります。その配列または型付き配列にはDataViewを使用できます。

個々のバイトを読み込む予定であるため、システムの大小のエンディアンを心配する必要はなく、すべてArray.reduce()を使用して単一のバイナリに結合することができるUint8Arrayを安全に使用できます文字列。

バイトをバイナリに変換するには、Number.toString(base)メソッドを使用できます。お返事のための

function arrayBufferToBinary(buffer) { 
 
    var uint8 = new Uint8Array(buffer); 
 
    return uint8.reduce((binary, uint8) => binary + uint8.toString(2), ""); 
 
} 
 

 
function fileToBinary(file, callback) { 
 
    var reader = new FileReader(); 
 
    reader.onload = (event) => callback(arrayBufferToBinary(reader.result)); 
 
    reader.readAsArrayBuffer(file); 
 
} 
 

 
var input = document.getElementById("file"); 
 
var output = document.getElementById("binary"); 
 

 
input.addEventListener("change", function(event) { 
 
    var file = input.files[0]; 
 
    if (file) fileToBinary(file, (binary) => output.textContent = binary); 
 
});

#binary { 
 
    word-wrap: break-word; 
 
}

<input id="file" type="file"> 
 
<div id="binary"></div>