html - JavaScript Automatically Save Image File to Folder - Stack Overflow

admin管理员组

文章数量:1302405

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

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

• javascript
• html

Share Follow edited Dec 10, 2016 at 2:11 Benjamin G asked Dec 10, 2016 at 2:07 Benjamin GBenjamin G 11522 gold badges33 silver badges1313 bronze badges 7

• 2 In general you can't, javascript doesn't have access to the clients filesystem unless a "save file" prompt is opened, and the user accepts. – adeneo Commented Dec 10, 2016 at 2:10
• Are you running this on the server side? You won't have the permissions to create a folder on your server or even on the client's local file system if this is client-side code. – gyre Commented Dec 10, 2016 at 2:11
• Is there a way to save an image file to a folder without any prompt needed? – Benjamin G Commented Dec 10, 2016 at 2:12
• 2 No, it would be a security issue if any website randomly could download and store files, create folders etc. on your filesystem. – adeneo Commented Dec 10, 2016 at 2:14
• How about I store it in the database instead? Is it a good practice? – Benjamin G Commented Dec 10, 2016 at 2:15

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

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 acplish. Good luck!

本文标签： htmlJavaScript Automatically Save Image File to FolderStack Overflow