Blob-Base64-Conversion (v2)

Revision 2 of this benchmark created by Niklas Werner on

Preparation HTML

<script>
  var blobContent = '';
  for (var i = 0; i < 256 * 256; i++) {
    blobContent += '#';
  }
  var testBlob = new Blob([blobContent]);
  var testBase64;
  var reader = new FileReader();
  reader.onload = function() {
    var dataUrl = reader.result;
    testBase64 = dataUrl.split(',')[1];
  };
  reader.readAsDataURL(testBlob);
</script>
<span style="font-family: monospace; white-space: pre;">
1 blob to base64 asynchronously
    using FileReader's readAsDataURL
2 blob to base64 asynchronously
    using FileReader's readAsArrayBuffer, String's fromCharCode and btoa
3 base64 to blob synchronously
    using atob, ArrayBuffer, String's charCodeAt and Blob's constructor
</span>

Test runner

Ready to run.

Testing in
TestOps/sec
1 Blob to Base64
// async test
var reader = new FileReader();
reader.onload = function() {
  var dataUrl = reader.result;
  var base64 = dataUrl.split(',')[1];
  deferred.resolve();
};
reader.readAsDataURL(testBlob);
ready
2 Blob to Base64 (2)
// async test
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);
  deferred.resolve();
};
reader.readAsArrayBuffer(testBlob);
ready
3 Base64 to Blob
var binary = atob(testBase64);
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]);
ready

Revisions

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