Question

如何自动将图片从画布保存到文件夹？我正在使用来自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用于在画布中绘图。这是我的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文件保存到save。感谢

Answer 1

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

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

获得服务器端脚本后，从客户端（从javascript）向图像数据发出AJAX请求到该服务器脚本。

我会提供代码示例和更深入的解释，但遗憾的是，您没有提供有关您的技术堆栈的任何真实信息以及您正在尝试完成的内容。祝你好运！

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

1 个答案: