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

Я пытался найти ответ на этот вопрос в течение последних трех дней с различными известными мне ключевыми словами, но не смог продвинуться далеко. Я новичок в 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)? Если нет, то каковы будут ваши рекомендации?


jquery webgl dataview arraybuffer texture2d
person Ben Goh    schedule 19.07.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Вам нужно установить для свойства responseType объекта xhr значение «arraybuffer».

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

var blob = new BlobBuilder().append(arraybuffer).getBlob();
img.onload = function() { window.URL.revokeObjectURL(this.src); };
img.src = window.URL.createObjectURL(blob);
person Ilmari Heikkinen    schedule 19.07.2011
comment
Извините за поздний ответ, моя повседневная работа не жалеет мне много времени. Спасибо за советы, Ильмари, они очень помогли! К сожалению, он не работает в моем последнем Firefox (и, конечно, в IE 9, но это меня не слишком беспокоит). Я все еще пытаюсь выяснить, как это работает в Firefox 5.0 (потому что jQuery.get работает), поэтому, пожалуйста, дайте мне указатель, если есть что-то еще, что мне нужно знать. Спасибо еще раз :) - person Ben Goh; 20.07.2011
comment
Привет @Ilmari, кажется, бета-версия Firefox 6.0 поддерживает это! Хорошие новости: в настоящее время они не реализовали Uint8Array и DataView для чтения в буфер, но Int8Array есть, по крайней мере, для использования :) - person Ben Goh; 20.07.2011
comment
Приношу свои извинения, Uint8Array поддерживается, я неправильно набрал его как UInt8Array! - person Ben Goh; 20.07.2011