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

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

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

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

如何将从JQuery.get下载的数据转换为ArrayBuffer？

1 个答案: