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 achieve this.

Here is my code so far which you can see at this JsFiddle.

<div id="canvas_container">
</div>
<p>
<a href='#' id="create_image">create</a> 
<a href="#" id="download_image">download</a>
</p>




$("#create_image").click(function() {
var cnvs = createSmileyOnCanvas();
$('#canvas_container').append(cnvs);
});


$("#download_image").click(function() {    
var img = $('#smiley_canvas').toDataURL("image/png");
var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
window.open(uriContent, 'download smiley image');
});



function createSmileyOnCanvas() {
var canvas = document.createElement('canvas');      
canvas.id = 'smiley_canvas';    
var ctx = canvas.getContext('2d');        

// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
ctx.stroke();

return canvas;
}

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, <a href="put stuff here" download="filename here">. 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.