How can I save my HTML5 canvas screen as a png image to a specific folder of my project with only pure javascript or jQuery?

Question

This is what I have found and used so far for saving the image. This function perfectly taking the screenshot and opens the image in a new window location. But I want to save the png image file to a specific folder of the project temporarily so that later on I can retrieve the image from that folder. This is my JS function:

function saveImage()
{
    var canvasScreen = document.getElementById("paintCanvas");
    var myImage; 
    if (canvasScreen.getContext) 
    {
         ctx = canvasScreen.getContext("2d");                
         myImage = canvasScreen.toDataURL("image/png");     
    }
    window.location.href = myImage;
}

This is the HTML part:

<>

I have already tried FileSaver.js ( https://github.com/eligrey/FileSaver.js ) but not succeeded. I have searched my solutions but came with nothing that works properly. I need this for HTML based mobile app. Please can anyone give me some clear idea or anything that you faced similar? Thanks in advance :)

Answer 1

You can't. JavaScript does not have access to your local file system. It's all sandboxed for security reasons.

You can send it to server and invoke a save-as from there (as you can do on client side as well, except for in IE), or use one of the many APIs for things like Dropbox , Google Drive etc. (or make a custom native application for the platform) which you integrate for synchronization on your local system in advance.

There is no way around it unfortunately.