Canvas.toDataURL image type performance (v15)

Revision 15 of this benchmark created on

Description

Tests toDataURL image types with a large canvas

Preparation HTML

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

Setup

c = document.createElement("canvas");
    c.width = 300;
    c.height = 300;
    ctx = c.getContext("2d");
    cpa = ctx.createImageData(300,300);
    for (var i=0; i<300*300; 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 callback()
    {
    
    }

Test runner

Ready to run.

Testing in
TestOps/sec
empty parameter
data = c.toDataURL("image/bmp",false);
ready
image/png
data = c.toDataURL("image/png");
ready
image/jpeg
data = c.toDataURL("image/jpeg");
ready
image/webp
data = c.toDataURL("image/webp");
ready
Default
data = c.toDataURL();
ready
getImageData
data = ctx.getImageData(0, 0, 300, 300);
ready
new Blob
data = new Blob([ctx.getImageData(0, 0, 300, 300).data]);
ready

Revisions

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