Canvas.toDataURL image type performance (v24)

Revision 24 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);
    HTMLCanvasElement.prototype.toBlobAsync = function(type, quality) {
        var dataURL = this.toDataURL(type, quality),
            binary = atob( dataURL.substr( dataURL.indexOf(',') + 1 ) ),
            i = binary.length,
            view = new Uint8Array(i);
    
        while (i--) {
            view[i] = binary.charCodeAt(i);
        }
    
        return view;
    };

Test runner

Ready to run.

Testing in
TestOps/sec
getImageData
ctx.getImageData(0, 0, c.width, c.height).data
ready
toBlobAsync image/jpeg 1.0
c.toBlobAsync("image/jpeg", 1.0);
ready
toBlobAsync image/jpeg 0.8
c.toBlobAsync("image/jpeg", 0.8);
ready
toBlobAsync image/png
c.toBlobAsync("image/png");
ready

Revisions

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