如何将从 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.imageData)。 length)作为服务器上的文件,所以我认为下载成功。
我打算读入下载的文件,并提取标题信息(并使用 WebGL Texture2D 中的其余图像数据进行显示)。那么问题来了:这是处理下载的自定义图像(在 WebGL 中用作纹理)的方法吗?如果没有,那么您的建议是什么?
I have attempted to find an answer to this for the past three days with various keywords I know of, but could not get far. I am new to JavaScript/WebGL so this could potentially turn out to be a complete ignorance on my part, please forgive me if that's the case.
This is what I do to download a binary file (a custom image file format) from my server, and reading the first four bytes (Int32) out of the downloaded data:
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);
});
}
The downloaded data 'imageData' is of the correct size (imageData.length) as the file on server, so I presume the download is successful.
I intend to read into the downloaded file, and extract header information (and use the rest of image data in WebGL Texture2D for display). So the question is then: is that the way to deal with downloaded custom images (for use as textures in WebGL)? If not, then what would your recommendations be?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
以下是如何使用普通的 XHR 来完成此操作:
http://www.html5rocks.com/en/tutorials/file/ xhr2/#toc-reponseTypeArrayBuffer
您需要将xhr对象的responseType属性设置为“arraybuffer”。
如果您的图像数据是未压缩的 RGBA,则它应该可以按原样在 WebGL 中使用。如果是压缩的,则需要先将其放入图像中。请参阅 Blob API 了解如何创建对象 URL 并将其用作图像 src。
Here's how to do it with a plain ol' XHR:
http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-reponseTypeArrayBuffer
You need to set the responseType property of the xhr object to 'arraybuffer'.
If your image data is uncompressed RGBA, it should be usable in WebGL as-is. If it's compressed, you need to put it in an image first. See the Blob API for how to create an object URL and use that as image src.