をチェックしますキャンバス内のピクセルとして最後の20 KBのバイトを描画する部分を通して。 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++;
}
}
私は現在のピクセルの位置(x、y)と画像の幅を格納できる変数を作成するには、まずました。その後
それはGeen値、それはブルーだために別のバイトだためレッド値、1バイトだために、各ピクセルが1つのバイトを取るので、私は4つのバイトを毎回ジャンプFORループ、それは、もちろん、ありの値と1バイトはアルファの値です。結果は1ピクセルあたり4バイトです。
バイナリファイルを読むとき、JavaScriptは文字列に変換しますが、RGBA値は文字ではなく0から255までの整数であるため、変換されたバイトの数値を元に戻す必要があります。 char。これを行うためには、文字のcharCodeを取得するだけで元の整数にする必要があります。
RGBA値を取得したら、それをキャンバスで受け入れられる形式の文字列に配置し、現在のfillStyleとして設定してから1x1 rectを描画する必要があります。行の最後のピクセルに達すると、y
が次の行に増やされ、x
がゼロに設定されるので、行の先頭から開始します。