Save Canvas With A Custom File Name

Question

I have the following code to save what is on the canvas to a file, but when it saves it saves as download as the file name. What can I do to use a custom filename instead of download?

// Get the Canvas
var ctx = document.getElementById("myChart").getContext("2d");

// Handle Saving the Canvas
$(document).on("click", "#save-graph", function(e){
    e.preventDefault();
    var image = ctx.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    window.location.href = image;
});

I was thinking of sending it to php and decoding the base64 and forcing a download from there... but I was hoping for a JS solution if possible — Get Off My Lawn, Jul 17 '14 at 14:31

score 4 · Accepted Answer · edited May 23 '17 at 12:02

4

You can follow this: http://eligrey.com/demos/FileSaver.js/

how to save canvas as png image?

edited May 23 '17 at 12:02

Community

1
1

answered Jul 17 '14 at 14:38

HoangHieu

2,802
3
28
44

That will do just fine! – Get Off My Lawn Jul 17 '14 at 14:51

score 0 · Answer 2 · answered Sep 14 '21 at 17:00

You can use a link for that purporse with the atribute download like this:

<a id="save-graph" href="" download="custom_name.png">

And on clicking that link everything will stay the same, just change href attribute of the link and trigger click:

$(document).on("click", "#save-graph", function(e){
    e.preventDefault();
    var image = ctx.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    $("#save-graph").attr("href", image);
    $('#save-graph')[0].click();
});

Save Canvas With A Custom File Name

2 Answers2