Save Client Side Generated Image on Button Click

Question

I have an IgniteUI igDataChart that I would like to save to disk as an image. You cannot right click on the chart and save the image, because it uses several canvases. The chart does however have an export image method which will get the entire chart image and return it into a javascript variable.

I would like to automatically save this file to the user's download folder on a button click. If this were a server side image I could simply direct the user to the appropriate url, but it is not.

How can the user download this client side generated png image of the chart on a button click? I need a crossbrowser solution.

JSFIDDLE

$(function () {
    $("#exportBtn").click(function(){
       //returns an image DOM element;
       var pngImage = $("#chart").igDataChart("exportImage");
       //now i need to download the image
    });
});

Answer 1

This solution offers better browser support and can be assigned to a button. http://jsfiddle.net/koo2hv5t/7/

1. Check blob support (you can add a message for old browsers or a server side fallback)
2. Wait till animation end
3. Copy the chart to dataURL format with igDataChart
4. Convert to a blob with Util.dataURLToBlob from https://github.com/ebidel/filer.js

5. Save the blob to a file with saveAs from https://github.com/eligrey/FileSaver.js

    //check support try { var isFileSaverSupported = !! new Blob; } catch (e) {} setTimeout(function () { //add data to url function downloadCanvas(link, canv, filename) { if (isFileSaverSupported) { saveAs(Util.dataURLToBlob(canv.src), filename); } } $("#exportBtn").click(function () { downloadCanvas(this, $("#chart").igDataChart("exportImage", 800, 600), 'test.png'); }); }, 1000); //wait till animation end 

Answer 2

You can proceed the following way:

1. Wait till animation end
2. Copy all canvas in the last one

3. Assign the data to an url (not a button)

    setTimeout(function () { var c = $("#chart canvas"); //get handle to all canvas var ctx = c[c.length - 1].getContext('2d'); for (i = 0; i < c.length - 1; i++) { //add all canvas to the last one ctx.drawImage(c[i], 0, 0); } for (i = 0; i < c.length - 1; i++) { //remove the duplicates c[i].remove(); } //add data to url function downloadCanvas(link, canv, filename) { link.href = canv.toDataURL(); link.download = filename; } $("#dl1").click(function () { downloadCanvas(this, c[2], 'test.png'); }); }, 1000); //wait till animation end 

http://jsfiddle.net/koo2hv5t/1/