2011-02-10 3 views
0

현재 일부 파일을 읽으려면 HTML5 파일 API를 사용하고 있습니다.자바 스크립트 BinaryString을 다루는

var reader = new FileReader(); 
reader.onload = function(event){ 
var result = event.target.result; 
} 
reader.readAsBinaryString(...) 

이제 결과는 큰 (50k + 바이트) 파일입니다. 그리고 그것으로 몇 가지 계산을하고 싶습니다. 예를 들어 ... 캔버스 등의 픽셀로 마지막 20K 바이트를 그리기, 처음 몇 바이트의 확인

이 문자열을 구문 분석하는 가장 효율적인 방법 ...

답변

1

좋아, 내가 당신을 안내 할 것입니다 무엇 마지막 20K 바이트를 캔버스의 픽셀로 그리는 부분을 통해 lattest 20K 바이트의 시작 위치를 얻기 위해, 모든

먼저 (나는 브라우저가 스크립트 실행 속도를 저하 또는 파괴하지 않고이를 처리 할 수 ​​있는지 여부에 대해 확실하지 오전하지만) 다음을 수행하십시오

var pixelsOffset = result.length - 20480

바이너리 데이터가 문자열 형식이므로 각 ASCII 문자는 단 1 바이트 만 사용하므로 문자열의 길이는 바이트 수와 같고 20KBytes는 20,480 바이트와 같습니다.

이제 픽셀 정보가 시작되는 위치를 알았으므로 픽셀을 캔바스로 그릴 때 문자열의 끝에 도달 할 때까지 바이트를 반복해야합니다.

var x = 0; 
var y = 0; 
var width = 300; 

for(var I = pixelsOffset; I < result.length; I += 4) 
{ 
    var R = result.charCodeAt(I); 
    var G = result.charCodeAt(I + 1); 
    var B = result.charCodeAt(I + 2); 
    var A = result.charCodeAt(I + 3); 

    var colorString = "rgba(" + R + ", " + G + ", " + B + ", " + A + ")"; 

    canvasContext.fillStyle = colorString; 

    canvasContext.fillRect(x, y, 1, 1); 

    x++; 

    if(x == width) 
    { 
     x = 0; 
     y++; 
    } 
} 

I는 I가 현재 화소의 위치 (x, y)의 화상의 폭을 저장할 수있는 변수를 생성하는 우선이었다 여기 했는가. 이 Geen 값의 것이 레드 값 1 바이트의 각 픽셀이 하나의 바이트를 필요하기 때문에

그럼 난 4 바이트마다 뛰어 FOR 루프, 그게 또 다른 바이트는 블루 있어, 물론입니다 값이고 1 바이트는 알파 값입니다. 결과는 픽셀 당 4 바이트입니다.

바이너리 파일을 읽을 때 자바 스크립트는 문자열로 변환하지만 RGBA 값은 문자가 아닌 정수 (0부터 255까지)이므로 바이트로 변환 된 바이트의 숫자를 다시 검색해야합니다. 숯. 이렇게하기 위해서는 문자의 charCode 만 가져와야 원래의 정수를 얻을 수 있습니다.

RGBA 값을 캔버스에서 허용하는 형식의 문자열에 넣으려면 현재 fillStyle로 설정 한 다음 1x1 rect를 그립니다. 행의 마지막 픽셀에 도달하면 y을 증가시켜 다음 행을 가져오고 x을 0으로 설정하여 행의 처음부터 시작합니다.