Missing extension when saving image from canvas

Question

I use this code to save images in Javascript :

window.location.href = grid.toDataURL("image/png").replace("image/png", "image/octet-stream");

The code works, but the file saved doesn't have any extension, I have to rename it manually.

My question is how can I put the extension at the end ?

Thank you.

score 6 · Accepted Answer · answered Dec 07 '13 at 18:11

6

toDataURL produces a data-uri not a file name so extensions doesn't apply in this case.

A data-uri is simply a text encoded version of the binary content which some browsers can read as a file - a data-stream if you will. As data streams doesn't have any filename you can't attach one.

You can work around this by setting an anchor tag like this:

<a id="imageLink" href="data-uri-here" download="myFilename.png">
    Click to download
</a>

In JavaScript you can set these attributes dynamic:

imageLink.href = grid.toDataURL();
imageLink.download = 'myOtherFilename.png';

answered Dec 07 '13 at 18:11

Very cool stuff ! Thank you ;) Is there an other way to produce this instead of declare link in html ? I use dat-gui library for my buttons and I don't know how to create the download attr. – jbltx Dec 07 '13 at 18:51
@mickaelb91 sure, you can simply create the tag in javascript as well. There is also the option of automagically trigger a click as well. Check this out: http://stackoverflow.com/questions/18480474/how-to-save-an-image-from-canvas/18480879#18480879 – Dec 07 '13 at 19:22

Missing extension when saving image from canvas

1 Answers1