# Encoding XHR image data

## JavaScript performance comparison

Revision 14 of this test case created by Kim

## Preparation code

``<img id="image"><script>  function arrayBufferDataUri(raw) {   var base64 = ''   var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'     var bytes = new Uint8Array(raw)   var byteLength = bytes.byteLength   var byteRemainder = byteLength % 3   var mainLength = byteLength - byteRemainder     var a, b, c, d   var chunk     // Main loop deals with bytes in chunks of 3   for (var i = 0; i < mainLength; i = i + 3) {    // Combine the three bytes into a single integer    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]      // Use bitmasks to extract 6-bit segments from the triplet    a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18    b = (chunk & 258048) >> 12 // 258048   = (2^6 - 1) << 12    c = (chunk & 4032) >> 6 // 4032     = (2^6 - 1) << 6    d = chunk & 63 // 63       = 2^6 - 1    // Convert the raw binary segments to the appropriate ASCII encoding    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]   }     // Deal with the remaining bytes and padding   if (byteRemainder == 1) {    chunk = bytes[mainLength]      a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2    // Set the 4 least significant bits to zero    b = (chunk & 3) << 4 // 3   = 2^2 - 1    base64 += encodings[a] + encodings[b] + '=='   } else if (byteRemainder == 2) {    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]      a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8    b = (chunk & 1008) >> 4 // 1008  = (2^6 - 1) << 4    // Set the 2 least significant bits to zero    c = (chunk & 15) << 2 // 15    = 2^4 - 1    base64 += encodings[a] + encodings[b] + encodings[c] + '='   }     return "data:image/jpeg;base64," + base64  }    // Get the image into the cache as we are not testing the network speed  var req = new XMLHttpRequest()  req.overrideMimeType('text/plain; charset=x-user-defined')  req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)  req.send(null)    image = document.getElementById('image')</script>``

## Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
ArrayBuffer + window.btoa
``var req = new XMLHttpRequest()req.overrideMimeType('text/plain; charset=x-user-defined')req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)req.responseType = 'arraybuffer'req.send(null)var binary = ''var buffer = req.mozResponseArrayBuffer || req.responsevar bytes = new Uint8Array(buffer)var bytesLen = bytes.byteLength;for (var i = 0; i < bytesLen; i++) { binary += String.fromCharCode(bytes[i])}image.src = "data:image/jpeg;base64," + window.btoa(binary)``
pending…
charCodeAt
``var req = new XMLHttpRequest()req.overrideMimeType('text/plain; charset=x-user-defined')req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)req.send(null)var responseText = req.responseText;var responseTextLen = responseText.length;var binary = ''for (var i = 0; i < responseTextLen; i+=1) { binary += String.fromCharCode(responseText.charCodeAt(i) & 0xff)}image.src = "data:image/jpeg;base64," + window.btoa(binary)``
pending…
ArrayBuffer direct to base64
``var req = new XMLHttpRequest()req.overrideMimeType('text/plain; charset=x-user-defined')req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)req.responseType = 'arraybuffer'req.send(null)image.src = arrayBufferDataUri(req.mozResponseArrayBuffer || req.response)``
pending…
charCodeAt (batched 4)
``var req = new XMLHttpRequest()req.overrideMimeType('text/plain; charset=x-user-defined')req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)req.send(null)var responseText = req.responseText;var responseTextLen = responseText.length;var binary = ''for (var i = 0; i < responseTextLen; i+=4) { binary += String.fromCharCode(responseText.charCodeAt(i+0) & 0xff, responseText.charCodeAt(i+1) & 0xff, responseText.charCodeAt(i+2) & 0xff, responseText.charCodeAt(i+3) & 0xff)}for (i-=4; i < responseTextLen; i+=1) { binary += String.fromCharCode(responseText.charCodeAt(i) & 0xff)}image.src = "data:image/jpeg;base64," + window.btoa(binary) ``
pending…
ArrayBuffer (batched 8) + window.btoa
``var req = new XMLHttpRequest()req.overrideMimeType('text/plain; charset=x-user-defined')req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)req.responseType = 'arraybuffer'req.send(null)var binary = ''var buffer = req.mozResponseArrayBuffer || req.responsevar bytes = new Uint8Array(buffer)var bytesLen = bytes.byteLength;for (var i = 0; i < bytesLen; i+=8) { binary += String.fromCharCode(bytes[i], bytes[i+1], bytes[i+2], bytes[i+3], bytes[i+4], bytes[i+5], bytes[i+6], bytes[i+7])}for (i -= 4; i < bytesLen; i++) { binary += String.fromCharCode(bytes[i])}image.src = "data:image/jpeg;base64," + window.btoa(binary)``
pending…
charCodeAt (optimised)
``var req = new XMLHttpRequest;req.overrideMimeType('text/plain; charset=x-user-defined');req.open('GET', "http://jonathanleighton.com/images/me.jpg", !1);req.send(null);for (var responseText = req.responseText, responseTextLen = responseText.length, binary = "", i = 0; i < responseTextLen; ++i) {  binary += String.fromCharCode(responseText.charCodeAt(i) & 255)}image.src = 'data:image/jpeg;base64,'+window.btoa(binary);``
pending…

## Revisions

You can edit these tests or add even more tests to this page by appending `/edit` to the URL. Here’s a list of current revisions for this page: