좋아, 내가 당신을 안내 할 것입니다 무엇 마지막 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으로 설정하여 행의 처음부터 시작합니다.