JavaScript, имеющий дело с BinaryString

Question

В настоящее время я использую HTML5 File Api для чтения некоторых файлов.

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

Теперь ... в результате получается большой (50 Кбайт) файл.И я хочу сделать некоторые расчеты с ним.Например, проверка его первых нескольких байтов, рисование последних 20 000 байтов в виде пикселей на холсте и т. Д.

Answer 1

Хорошо, позвольте мне пройтись по части рисования последних 20 Кбайт в виде пикселей на холсте.(Хотя я не уверен, сможет ли браузер справиться с этим, не замедляя и не прерывая выполнение скрипта)

Прежде всего, чтобы получить начальную позицию последних 20 Кбайт, сделайте следующее:

var pixelsOffset = result.length - 20480

Поскольку ваши двоичные данные представлены в строковом формате и каждый символ ASCII занимает всего 1 байт, длина строки равна количеству байтов, а размер 20 КБ равен 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) и ширину изображения.

Затем цикл FOR, где я каждый раз прыгаю 4 байта, то естьКонечно, потому что каждый пиксель занимает один байт для значения Red , один байт для значения Geen , другой байт для значения Blue и одинбайт для значения Alpha .В результате получается 4 байта на пиксель.

Когда вы читаете двоичный файл, JavaScript преобразует его в строку, но поскольку значения RGBA являются целыми числами (от 0 до 255), а не символами, нам необходимо получить обратно числовое значениезначение байта, который был преобразован в символ.Для этого нам нужно только получить charCode символа, поэтому у нас есть исходное целое число.

После того, как у нас есть наши значения RGBA, нам нужно поместить его в строку в формате, принятом холстом,установите его в качестве текущего fillStyle, а затем нарисуйте прямоугольник 1x1.Как только мы доберемся до последнего пикселя строки, мы увеличиваем y, чтобы перейти к следующей строке, и устанавливаем x в ноль, поэтому мы начинаем с начала строки.