draw Image base64 vs url vs blob (v27)

Revision 27 of this benchmark created on

Preparation HTML

<img id="img" src="https://lh3.googleusercontent.com/-v9Hd_uz3oDA/VGn7n0Ox5gI/AAAAAAAAAD8/RiMsgsj3_1o/w600-h800-no/07f5ffe6ca7eb5d3c2b8d3bc8c.jpg"/>
<script>
var image_url, base64_jpeg, base64_png, blob_url, blob;
var img = new Image();
img.onload = function(){
var c = document.createElement('canvas');
c.width = img.width;
c.height = img.height;
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0);

image_url = img.src;
base64_jpeg = c.toDataURL('image/jpeg', 0.9);
base64_png = c.toDataURL("image/png");
}

img.crossOrigin = "Anonymous";
img.src = "https://lh3.googleusercontent.com/-v9Hd_uz3oDA/VGn7n0Ox5gI/AAAAAAAAAD8/RiMsgsj3_1o/w600-h800-no/07f5ffe6ca7eb5d3c2b8d3bc8c.jpg";

var xhr = new XMLHttpRequest();
xhr.open( "GET", img.src, true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
    var arrayBufferView = new Uint8Array( this.response );
    blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    blob_url = urlCreator.createObjectURL( blob );
};

xhr.send();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
image from url
// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = image_url;
ready
image from base64 jpeg
// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = base64_jpeg;
ready
image from base64 png
// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = base64_png;
ready
image from blob_url
// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = blob_url;
ready
image from blob
// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
var urlCreator = window.URL || window.webkitURL;
img.src = urlCreator.createObjectURL(blob);
ready

Revisions

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