Blob-Base64-Conversion (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script>
  var blobToBase64 = function(blob, cb) {
      var reader = new FileReader();
      reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];
        cb(base64);
      };
      reader.readAsDataURL(blob);
      };

  var base64ToBlob = function(base64, cb) {
      var binary = atob(base64);
      var len = binary.length;
      var buffer = new ArrayBuffer(len);
      var view = new Uint8Array(buffer);
      for (var i = 0; i < len; i++) {
        view[i] = binary.charCodeAt(i);
      }
      cb(new Blob([view]));
      };

  var base64ToBlobSync = function(base64) {
      var binary = atob(base64);
      var len = binary.length;
      var buffer = new ArrayBuffer(len);
      var view = new Uint8Array(buffer);
      for (var i = 0; i < len; i++) {
        view[i] = binary.charCodeAt(i);
      }
      var blob = new Blob([view]);
      return blob;
      };

  var blobToBase64_2 = function(blob, cb) {
      var reader = new FileReader();
      reader.onload = function() {
        var buffer = reader.result;
        var view = new Uint8Array(buffer);
        var binary = String.fromCharCode.apply(window, view);
        var base64 = btoa(binary);
        cb(base64);
      };
      reader.readAsArrayBuffer(blob);
      };
  var bigBlobContent = '';
  for (var i = 0; i < 256 * 256; i++) {
    bigBlobContent += '#';
  }
  var bigTestBlob = new Blob([bigBlobContent]);

  var smallBlobContent = '';
  for (var i = 0; i < 256; i++) {
    smallBlobContent += '#';
  }
  var smallTestBlob = new Blob([smallBlobContent]);

  var bigTestBase64;
  blobToBase64(bigTestBlob, function(x) {
    bigTestBase64 = x;
  });
  var smallTestBase64;
  blobToBase64(smallTestBlob, function(x) {
    smallTestBase64 = x;
  });
</script>
<span style="font-family: monospace; white-space: pre;">
1 big   blob   to base64 asynchronously using FileReader's readAsDataURL
2 big   base64 to blob   asynchronously using atob, ArrayBuffer and String's charCodeAt
3 big   blob   to base64 asynchronously using FileReader's readAsArrayBuffer and String's fromCharCode
4 small blob   to base64 asynchronously using FileReader's readAsDataURL
5 small base64 to blob   asynchronously using atob, ArrayBuffer and String's charCodeAt
6 small blob   to base64 asynchronously using FileReader's readAsArrayBuffer and String's fromCharCode
7 big   base64 to blob   synchronously  using atob, ArrayBuffer and String's charCodeAt
8 small base64 to blob   synchronously  using atob, ArrayBuffer and String's charCodeAt
</span>

Test runner

Ready to run.

Testing in
TestOps/sec
1 Blob to Base64 [Big]
// async test
blobToBase64(bigTestBlob, function() {
  deferred.resolve();
});
ready
2 Base64 to Blob [Big]
// async test
base64ToBlob(bigTestBase64, function() {
  deferred.resolve();
});
ready
3 Blob to Base64 (2) [Big]
// async test
blobToBase64_2(bigTestBlob, function() {
  deferred.resolve();
});
ready
4 Blob to Base64 [small]
// async test
blobToBase64(smallTestBlob, function() {
  deferred.resolve();
});
ready
6 Blob to Base64 (2) [small]
// async test
blobToBase64_2(smallTestBlob, function() {
  deferred.resolve();
});
ready
7 Base64 to Blob (synchronously) [Big]
base64ToBlobSync(bigTestBase64);
ready
8 Base64 to Blob (synchronously) [small]
base64ToBlobSync(smallTestBase64);
ready

Revisions

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