JavaScript自动将图像文件保存到文件夹

Question

如何自动将 Canvas 中的图像保存到文件夹中？我正在使用 来自 szimek ( link ) 的 signature_pad-1.5.2。到目前为止，这是我尝试过的:

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>

signature_pad.js 用于在 Canvas 中绘图。这是我的 app.js 来自 signature_pad-1.5.2 的内容(我稍微修改了一下):

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';
}
});

当我单击保存 按钮时，我试图将image.png 文件保存到newFolder。谢谢

Answer 1

javascript 无法访问文件系统，这是出于安全考虑。不过，您可以在很多地方将图像数据存储为字符串，例如浏览器存储。幸运的是，您似乎正试图将其存储在 Web 服务器的文件夹中!

您在这里要做的最好的事情是在要存储图像的服务器上制作一个脚本。该脚本将接受文件 POST 请求并将其存储在某处的服务器文件夹中。例如，这可以用 php 编写。

获得该服务器端脚本后，从客户端(从 javascript)向该服务器脚本发出带有图像数据的 AJAX 请求。

我会提供代码示例和更深入的解释，但不幸的是，您没有提供任何关于您的技术堆栈以及您究竟想要完成什么的真实信息。祝你好运!