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

gjujkainvt

New Member
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:[*]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,[*]Display a widget (KendoUI preferably) with the image resulting from the \[code\]Canvas2Image.saveAsPNG()\[/code\] 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:\[code\]<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button> \[/code\]Function that triggers the download:\[code\]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 }\[/code\]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 \[code\]download\[/code\] attribute would not do the trick as it is currently only supported in Chrome.Any creative solutions?
 
Back
Top