A cross-browser alternative to Canvas2Image or HTML5 download attribute?

Question

While developing a pattern generator I am running into the same problem described in this question from 2011.

The answers given don't really offer a cross-browser, client-side solution.

I would accept any of the following solutions when clicking the Export Pattern button:

1. Triggering a download through canvas2image while ensuring that the file is saved with a .png extension (no matter what the filename is set to) or,

2. Display a widget (KendoUI preferably) with the image resulting from the Canvas2Image.saveAsPNG() method and let the user save it from there preferably not using the lame right-click solution, but with a link or a button.

HTML for the button I'm currently using:

<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button>   

Function that triggers the download:

function downloadImage () {

    //...extra code omitted
    var oCanvas = document.getElementById("my_canvas");
    oCanvas.width = $("#pixels-h").val();
    oCanvas.height = $("#pixels-v").val(); 
    Canvas2Image.saveAsPNG(oCanvas);
    //...extra code omitted    

  }

The file seems to download fine under OSX with Chrome Version 23.0.1271.95 and Safari Version 5.1.7 (6534.57.2).

I have a report of someone unable to open the file after downloading it under Firefox 17.0.1 for OSX. Apparently the download generates a .part file.

The biggest issue is that without a file extension I doubt that this method can be reliable.

I am looking for a client-side only solution with the widest possible compatibility with current browsers, so I guess the HTML5 download attribute would not do the trick as it is currently only supported in Chrome.

Any creative solutions?

Answer 1

I ran into the same issue. The basic problem is the filename needs to be added in the header but canvas2images uses document.location.href = strData and strData doesnt have headers. So the answer is, canvas2image does not support the feature we need, and we will need to try another solution. (for example perhaps FileSaver.js and canvas-toBlob.js)

http://eligrey.com/demos/FileSaver.js/