Javascript Hacks: Using XHR to load binary data

Tuesday, July 07, 2009

I recently needed to get image data from a server using Javascript, base64 encode it, and post that data back to an application. While the details of why I needed to do this are a bit complex, I believe that getting image data through an XMLHttpRequest object and base 64 enconding it will become more valuable in terms of client-side image manipulation using the data URI scheme for image tags.

This would allow a Javascript developer, for instance, to load an existing image (say, a photo), without base64 encoding it on the server, load it into an image tag with a data URI, and make direct manipulations on that image.

Unfortunately, this area is relatively new and browsers have a lot of differences. Data URI support is still very new, inconsistent, and limited. In the meantime, here is how you get that base64 encoded image in the first place:

Internet Explorer:


IE has a property of XMLHttpRequest object for binary data ResponseBody. This contains exactly what we need, but unfortunately the property is not visible to Javascript. Since the string returned to Javascript by ResponseText will be terminated at the first null value, we must use ResponseBody. This requires a bit of VBScript, which can do one of the following things:
  1. Get the numeric value of each unsigned byte and turn that into a number in a string of comma delimited numbers. This is less efficient, but gets you in and out of VBScript as quickly as possible, allowing a generic base64 encoding routine. This is the route I followed (it may be less efficient, but it pales in comparison with the XHR request just made):

    Function BinaryArrayToAscCSV( aBytes )
    Dim j, sOutput
    sOutput = "BinaryArrayToAscCSV"
    For j = 1 to LenB(aBytes)
    sOutput= sOutput & AscB( MidB(aBytes,j,1) )
    sOutput= sOutput & ","
    Next
    BinaryArrayToAscCSV = sOutput
    End Function

  2. Base 64 encode it directly in VBScript.

Once this is done, we can then base64 encode it using a fairly generic function in Javascript:

Base64 = {

// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

encodeBinaryArrayAsString : function(input){
var ascArr;
var output = "";
var bytebuffer;
var encodedCharIndexes = new Array(4);

var inx = 0;
ascArr = input.substring("BinaryArrayToAscCSV".length, input.length - 1).split(',');
while(inx < ascArr.length){
// Fill byte buffer array
bytebuffer = new Array(3);
for(jnx = 0; jnx < bytebuffer.length; jnx++)
if(inx < ascArr.length)
bytebuffer[jnx] = parseInt(ascArr[inx++]);
else
bytebuffer[jnx] = 0;

// Get each encoded character, 6 bits at a time
// index 1: first 6 bits
encodedCharIndexes[0] = bytebuffer[0] >> 2;
// index 2: second 6 bits (2 least significant bits from input byte 1 + 4 most significant bits from byte 2)
encodedCharIndexes[1] = ((bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4);
// index 3: third 6 bits (4 least significant bits from input byte 2 + 2 most significant bits from byte 3)
encodedCharIndexes[2] = ((bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6);
// index 3: forth 6 bits (6 least significant bits from input byte 3)
encodedCharIndexes[3] = bytebuffer[2] & 0x3f;

// Determine whether padding happened, and adjust accordingly
paddingBytes = inx - (ascArr.length - 1);
switch(paddingBytes){
case 2:
// Set last 2 characters to padding char
encodedCharIndexes[3] = 64;
encodedCharIndexes[2] = 64;
break;
case 1:
// Set last character to padding char
encodedCharIndexes[3] = 64;
break;
default:
break; // No padding - proceed
}
// Now we will grab each appropriate character out of our keystring
// based on our index array and append it to the output string
for(jnx = 0; jnx < encodedCharIndexes.length; jnx++)
output += this._keyStr.charAt(encodedCharIndexes[jnx]);
}
return output;
}
};



Firefox:

Firefox works a little differently, as there is no RequestBody property. In this case, RequestText is not truncated as long as you override the mime type coming from the server, forcing Firefox to pass the data unaltered. All we need to do is compensate for binary data coming back and being placed in a Unicode Javascript string. To compensate, we can AND each character with 0xFF to throw away the high-order byte (see https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data). The resulting encoding function looks like this:

Base64 = {

// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

encodeBinary : function(input){
var output = "";
var bytebuffer;
var encodedCharIndexes = new Array(4);
var inx = 0;
var paddingBytes = 0;

while(inx < input.length){
// Fill byte buffer array
bytebuffer = new Array(3);
for(jnx = 0; jnx < bytebuffer.length; jnx++)
if(inx < input.length)
bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff; // throw away high-order byte, as documented at: https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data
else
bytebuffer[jnx] = 0;

// Get each encoded character, 6 bits at a time
// index 1: first 6 bits
encodedCharIndexes[0] = bytebuffer[0] >> 2;
// index 2: second 6 bits (2 least significant bits from input byte 1 + 4 most significant bits from byte 2)
encodedCharIndexes[1] = ((bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4);
// index 3: third 6 bits (4 least significant bits from input byte 2 + 2 most significant bits from byte 3)
encodedCharIndexes[2] = ((bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6);
// index 3: forth 6 bits (6 least significant bits from input byte 3)
encodedCharIndexes[3] = bytebuffer[2] & 0x3f;

// Determine whether padding happened, and adjust accordingly
paddingBytes = inx - (input.length - 1);
switch(paddingBytes){
case 2:
// Set last 2 characters to padding char
encodedCharIndexes[3] = 64;
encodedCharIndexes[2] = 64;
break;
case 1:
// Set last character to padding char
encodedCharIndexes[3] = 64;
break;
default:
break; // No padding - proceed
}
// Now we will grab each appropriate character out of our keystring
// based on our index array and append it to the output string
for(jnx = 0; jnx < encodedCharIndexes.length; jnx++)
output += this._keyStr.charAt(encodedCharIndexes[jnx]);
}
return output;
};


Ideally we'd combine these two functions into a single encoding function, but I've left them separate for clarity. Note also that these techniques do not appear to work for Safari, Chrome or Opera. It should work for IE6 if using the correct ActiveX XHR object, but I was not supporting IE6. I did a spot check on Safari/Chrome/Opera and they were not working, but I did not investigate as they were not supported browsers for my implementation. The actual XHR function I used was:

LoadBinaryResource = function(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);

if (req.overrideMimeType)
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
if (typeof(req.responseBody) !== 'undefined') return BinaryArrayToAscCSV(req.responseBody);
return req.responseText;
}

LoadBinaryResourceAsBase64 = function(url) {
var data = LoadBinaryResource(url);

if (data.indexOf("BinaryArrayToAscCSV") !== -1)
return Base64.encodeBinaryArrayAsString(data);
else
return Base64.encodeBinary(data);
}



7 comments:

Anonymous said...

Thank you for this wonderful javascript. Unfortunately, it seems firefox has a max limit on the size of the ResponseText. I was trying to load a large jpeg image (2.47MB) using this technique (by base64 encoding it and then use the img src="data:image/jpeg;base64,XXXX" trick, but the responseText tops at 8192 bytes.

timrice said...

You can use the JScript "VBArray" object to get at these bytes in IE (without using VBScript):

var data = new VBArray(xhr.responseBody).toArray();


http://msdn.microsoft.com/en-us/library/y39d47w8(v=VS.85).aspx

Dannii said...

Tim, can you share an example of that technique working? I can't get it to work, instead I get a "VBArray expected" TypeError.

Anonymous said...

Thanks! Could you rewrite this code for Google Chrome?

Darxis said...

That's what I was searching for! Thanks!!!!!!!

Anonymous said...

AWESOME!
ascii bilder

mmjj said...

This post was really usefull to me.

I need to download .zip file a url. I have successfully recieved binary data using XHR. How do I save this binary data to a file using javascript?

I am using IE8 and FileAPI libraries are not working here.

Emil's Wicked Cool Blog