canvas.toDataURL() download size limit

Question

I am attempting to download an entire canvas image using canvas.toDataURL(). The image is a map rendered on the canvas (Open Layers 3).

In Firefox I can use the following to download the map on the click of a link:

var exportPNGElement = document.getElementById('export_image_button');

if ('download' in exportPNGElement) {
    map.once('postcompose', function(event) {
    var canvas = event.context.canvas;
    exportPNGElement.href = canvas.toDataURL('image/png');
});

map.renderSync();

} else {
alert("Sorry, something went wrong during our attempt to create the image");
}

However in Chrome and Opera I'm hitting a size limit on the link. I have to physically make the window smaller for the download to work.

There are size limit differences between browsers, Chrome is particularly limiting. A similar post here (over 2 years old now) suggests an extensive server side workaround:

canvas.toDataURL() for large canvas

Is there a client side work around for this at all?

Answer 1

Check out toBlob https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

canvas.toBlob(function(blob) {
    exportPNGElement.href = URL.createObjectURL(blob);
});

browser support is not as awesome as toDataURL though. But Chrome and Firefox have it, so it solves your biggest issue. The mdn link above also has a polyfill based on toDataURL, so you get the best possible support.

Just in case you didn't know, you can also dramatically reduce the size using jpeg compression

exportPNGElement.href = canvas.toDataURL('image/jpeg', 0.7);