Canvas.toDataURL image type performance (v23)

Revision 23 of this benchmark created on

Description

Tests toDataURL image types with a large canvas

Preparation HTML

<canvas id="canvas" width="1280" height="720" style="width:1280px; height:720px;">
</canvas>

Setup

c = document.getElementById("canvas");
    ctx = c.getContext("2d");
    cpa = ctx.createImageData(1280, 720);
    for (var i = 0; i < 1280 * 720; i++) {
      cpa.data[i * 4 + 0] = Math.round(Math.random() * 255);
      cpa.data[i * 4 + 1] = Math.round(Math.random() * 255);
      cpa.data[i * 4 + 2] = Math.round(Math.random() * 255);
      cpa.data[i * 4 + 3] = 255;
    }
    ctx.putImageData(cpa, 0, 0);
    
        function toBlob1(dataURL) {
                binary = atob( dataURL.substr( dataURL.indexOf(',') + 1 ) ),
                i = binary.length,
                view = new Uint8Array(i);
    
            while (i--) {
                view[i] = binary.charCodeAt(i);
            }
    
            return view;
        };
    
       function toBlob2(dataURI) {
              var binary = atob(dataURI.split(',')[1]);
      var array = [];
      var size = binary.length;
      for (var i = 0; i < size; i++) {
        array.push(binary.charCodeAt(i));
      }
    
            new Uint8Array(array);
        };
    
    var data = c.toDataURL('image/jpeg', 0.9);

Test runner

Ready to run.

Testing in
TestOps/sec
image data
new Blob([ctx.getImageData(0, 0, c.width, c.height).data]);
ready
image/jpeg 1.0
c.toDataURL("image/jpeg", 1.0);
ready
image/jpeg 0.8
c.toDataURL("image/jpeg", 0.8);
ready
image/png
c.toDataURL("image/png");
ready
toBlob1
toBlob1(data)
ready
toBlob2
toBlob2(data)
ready
c.toBlob jpeg 0.8
// async test
c.toBlob(function(blob) {
  deferred.resolve();
}, "image/jpeg", 0.8);
ready
c.toBlob jpeg 1.0
// async test
c.toBlob(function(blob) {
  deferred.resolve();
}, "image/jpeg", 1.0);
ready
c.toBlob png
c.toBlob(function(blob) {
  deferred.resolve();
});
ready

Revisions

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