How to turn data downloaded from JQuery.get, into ArrayBuffer?

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 fi开发者_开发技巧le 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?

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.

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