Encoding XHR image data (v32)

Revision 32 of this benchmark created on

Preparation HTML

<img id="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" />
<script>
  // Testing the manual method
  function arrayBufferDataUri(raw) {
    var base64 = 'data:image/jpeg;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 base64;
  }

  image = document.getElementById('image');

  // Get the image into the cache as we are not testing the network speed
  var req = new XMLHttpRequest();
  req.open('GET', 'http://i.imgur.com/PofUc6Y.jpg', true);
  req.responseType = 'arraybuffer';
  req.onload = function() {
    buffer = req.mozResponseArrayBuffer || req.response;
  }
  req.send(null);

  function test(func) {
     var runs = 20, complete = 0;
     for (var i = 0; i < runs; i++) {
        func(onend);
     }
     function onend(deferred) {
        if (++complete === runs) {
           deferred.resolve();
        }
     }
  }
</script>

Setup

image.src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D";

Test runner

Ready to run.

Testing in
TestOps/sec
readAsDataURL
// async test
test(function(onend) {
   var blob = new Blob([buffer], {type: "image/jpeg"});
   var fr = new FileReader();
   fr.onload = function() {
      image.src = fr.result;
      onend(deferred);
   };
   fr.readAsDataURL(blob);
});
ready
readAsBinaryString + btoa
// async test
test(function(onend) {
   var blob = new Blob([buffer], {type: "image/jpeg"});
   var fr = new FileReader();
   fr.onload = function() {
      var binary = fr.result;
      image.src = "data:image/jpeg;base64," + window.btoa(binary);
      onend(deferred);
   };
   fr.readAsBinaryString(blob);
});
ready
fromCharCode + btoa
test(function() {
   var binary = '';
   var 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);
});
ready
fromCharCode.apply + btoa
test(function() {
   var bytes = new Uint8Array(buffer);
   var binary = String.fromCharCode.apply(null, bytes);
   image.src = "data:image/jpeg;base64," + window.btoa(binary);
});
ready
arrayBufferDataUri
test(function() {
   image.src = arrayBufferDataUri(buffer);
});
ready
createObjectURL
test(function() {
    var blob = new Blob( [ new Uint8Array( buffer ) ], { type: "image/jpeg" } );
    var imageUrl = (window.URL || window.webkitURL).createObjectURL( blob );
    image.src = imageUrl;
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.