Download a Html5 canvas element as an image with the file extension with Javascript

Question

I would like to be able to download a Html5 canvas element as an image with the file extension with Javascript.

The CanvasToImage library does not seem to be able to

Answer 1

In order to force/suggest a file name in the browser's download dialog, you would need to send the Content-Disposition: attachment; filename=foobar.png header.

This is not possible to do via window.open, so you're out of luck unless there are some browser-specific hacks for this.

If you really need the filename, you could try using the new download attribute in a, . It isn't very widely supported yet though.

Another alternative would be to first submit the data to the server using ajax, then redirect the browser to some server-side script which would then serve the data with the correct header.