JavaScript로 이미지의 텍스트 이진 표현을 만드는 방법은 무엇입니까?

Question

작은 프로젝트의 경우 이진 표현 (0과 1)으로 이미지를 변환하고 싶습니다. PHP, .NET을 실행하도록 구성되지 않은 컴퓨터에서이 코드를 사용하고 싶습니다. JavaScript로이 코드를 사용하고 싶습니다.

지금은 을 사용하여 파일을 읽었습니다.이 파일은 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의는 읽기/숫자 데이터를 쓸 수; getInt8은 데이터를 바이트 위치 (여기서는 0)에서 ArrayBuffer의 부호있는 8 비트 정수 표현으로 변환하고 toString(2)은 8 비트 정수를 2 진 표현 형식 (즉 1과 0의 문자열)으로 변환합니다.

'magic'오프셋 값은 바이트로 저장된 파일을 8 비트 정수로 가져 와서 8 비트 정수 표현으로 읽음으로써 얻어집니다. 바이트 저장 (즉, 8 비트) 파일을 32 비트 정수로 읽으려는 경우 32/8 = 4가 바이트 공간 수 (바이트 오프셋 값)입니다. ArrayBuffer 객체 일반 고정 길이 원시 이진 데이터 버퍼를 나타내는 데 사용된다

:

---

이

는 어레이를 입력하기 또한, ArrayBuffer에서 읽기/쓰기 할 recommended way이다. ArrayBuffer의 내용을 직접 조작 할 수는 없습니다. 대신 형식화 된 배열 객체 중 하나를 만들거나 버퍼를 특정 형식으로 나타내는 DataView 객체를 만들고이를 사용하여 버퍼의 내용을 읽고 씁니다.

서명 8 비트 표현 이외에, 당신은 또한 표현의 다양성을 얻을 수 있습니다 (같은 float64 또는 int32). 표현의 선택은 중요하지 않습니다. 왜냐하면 toString(2)은 바이너리 형식으로 표시하기 때문입니다 (비록 바이너리 문자열의 길이가 확실한 이유로 변경 될지라도!).

이 예에서는 전체 파일을 일련의 8 비트 정수로 표시하도록 선택 했으므로 즉 바이트 단위로 읽는 것으로 나타났습니다. 그러나 일반적으로 DataView은 균질 유형의 혼합을 용이하게합니다. 처음 12 바이트는 32 비트 정수로, 나머지는 64 비트로 읽을 수 있습니다. DataView은 일반적으로 파일을 처리 할 때 다른 파일 형식을이 방법으로 처리 할 수 ​​있고 DataView은 다른 아키텍처의 파일의 엔디안을 처리하기 때문에 선호됩니다.

@ le_m의 답변 또는 DataView과 같이 유형이 지정된 배열로 처리 할 수 ​​있지만 DataView은 endianness (파일이 다른 CPU의 네트워크를 통해 전송되는 경우)와 다른 파일 형식 (예 :주 내용 앞에 몇 바이트 헤더가있는 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>