CODEWITHSUNDEEP
javascripthtml
Benjamin G
Benjamin G

Reputation: 115

JavaScript Automatically Save Image File to Folder

How can I automatically save an image from canvas into a folder? I am using the signature_pad-1.5.2 from szimek (link). Here is what I have tried so far:

HTML CANVAS

<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
  <canvas></canvas>
</div>
<div class="m-signature-pad--footer">
  <div class="description">Signature</div>
  <button type="button" class="button clear" data-action="clear">Clear</button>
  <button type="button" class="button save" data-action="save">Save</button>
</div>
</div>

<script src="js/signature_pad.js"></script>
<script src="js/app.js"></script>

The signature_pad.js is for drawing in the canvas. Here is the content of my app.js from signature_pad-1.5.2 (I modified it a little):

app.js

var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;

saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
    alert("Please provide signature first.");
} else {
    newfolder = myObject.CreateFolder ("C:\\xampp\\htdocs\\signature\\resources\\sigs");
    alert();
    saveButton.href = signaturePad.toDataURL();
    saveButton.download = 'image.png';
}
});

I am trying to save the image.png file to newFolder when I click the save button. Thanks

Upvotes: 1

Views: 25937

Answers (1)

djdduty
djdduty

Reputation: 284

There is no way for javascript to access the filesystem, this is due to security concerns. You can store the image data as a string in a lot of places though, such as browser storage. Luckily for you it looks as though you're trying to store it in a web server's folder!

The best thing for you to do here is to make a script on the server that you want to store the image on. That script will accept a file POST request and store it in a server folder somewhere. This can be written in php for example.

Once you have that server-side script, make an AJAX request from the client (from the javascript) with the image data to that server script.

I would provide code samples and a more in-depth explanation, but unfortunately you haven't provided any real info about your tech stack and what exactly you're trying to accomplish. Good luck!

Upvotes: 4

Related Questions