如何将从 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

以下是使用普通的 ol' XHR 的方法： http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-reponseTypeArrayBuffer

您需要将 xhr 对象的 responseType 属性设置为 'arraybuffer'。

如果您的图像数据是未压缩的 RGBA，它应该可以在 WebGL 中按原样使用。如果是压缩的，则需要先将其放入图像中。有关如何创建对象 URL 并将其用作图像 src，请参阅 Blob API。

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