Canvas.toDataURL image type performance (v19)

Revision 19 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);

Test runner

Ready to run.

Testing in
TestOps/sec
image data
data = ctx.getImageData(0, 0, 1280, 720);
ready
image/png
// async test
c.toBlob(function(blob) {
    // got blob
}, "image/png");
ready
image/jpeg 0.2
c.toBlob(function(blob) {
    // got blob
}, "image/jpeg", 0.2);
ready
image/jpeg 0.5
c.toBlob(function(blob) {
    // got blob
}, "image/jpeg", 0.5);
ready
image/jpeg 0.8
c.toBlob(function(blob) {
    // got blob
}, "image/jpeg", 0.8);
ready
image/jpeg 1.0
c.toBlob(function(blob) {
    // got blob
}, "image/jpeg", 1.0);
ready

Revisions

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