Как превратить данные, загруженные из JQuery.get, в ArrayBuffer?

Question

Я пытался найти ответ на этот вопрос в течение последних трех дней с помощью различных ключевых слов, о которых я знаю, но не смог продвинуться далеко. Я новичок в JavaScript / WebGL, так что это потенциально может оказаться полным невежеством с моей стороны, пожалуйста, прости меня, если это так.

Это то, что я делаю, чтобы загрузить двоичный файл (пользовательский формат файла изображения) с моего сервера и прочитать первые четыре байта (Int32) из ​​загруженных данных:

TileImage.prototype.LoadFromUrl = function (imageUrl) {
    $.get(imageUrl, function (imageData) {
        var buffer = new ArrayBuffer(imageData); // Verified 'imageData' is good.
        var view = new DataView(buffer);         // Create a data view on buffer.
        var dwordValue = view.getInt32(0);       // Read the first four bytes.
        alert("The first Uint32 value is " + dwordValue);
    });
}

Загруженные данные 'imageData' имеют правильный размер (imageData.length) в качестве файла на сервере, поэтому я предполагаю, что загрузка прошла успешно.

Я намереваюсь прочитать в загруженный файл и извлечь информацию заголовка (и использовать остальные данные изображения в WebGL Texture2D для отображения). Таким образом, вопрос заключается в следующем: это способ обработки загруженных пользовательских изображений (для использования в качестве текстур в WebGL)? Если нет, то какими будут ваши рекомендации?

Answer 1

Вот как это сделать с простым XHR: http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-reponseTypeArrayBuffer

Необходимо установить для свойства responseType объекта xhr значение 'arraybuffer'.

Если данные вашего изображенияэто несжатый RGBA, он должен использоваться в WebGL как есть.Если он сжат, сначала нужно поместить его в изображение.Обратитесь к API Blob, чтобы узнать, как создать URL объекта и использовать его в качестве источника изображения.

var blob = new BlobBuilder().append(arraybuffer).getBlob();
img.onload = function() { window.URL.revokeObjectURL(this.src); };
img.src = window.URL.createObjectURL(blob);