我在 php 文档上有一个签名板。一切正常，直到我点击提交。.png 正在写入服务器，但文件不可读且 0kb 表示没有数据。我的猜测是图像没有从画布正确发送，或者没有通过 POST 发送，以便我的 php 在必要时捕获和处理。任何帮助，将不胜感激。无论如何，我在 javascript 方面都不是最强的。signature_pad.js 用于将签名板启动到画布上，该画布再次正常工作，app.js 包含表单上清除按钮和提交按钮的功能。我包含了 app.js 的代码。我编辑 app.js 以将其发送到隐藏字段，以便我可以在 php 中选择 png/canvas 数据并将其保存到服务器并相应地处理它。在我的 php 中，我在使用 $_POST 获取隐藏字段后使用了 var_dump() ，它只显示 string(0) 意味着只是空的。单击提交后，我在 js 中设置了一个警报，以查看数据字符串是否也存在，并且确实存在。我对数据丢失的位置感到困惑。
更新 因此，我对此进行了深入研究，因此使用POST的表单存在问题。js 和 php 元素都可以正常工作，但是一旦提交表单，一切都会挂起，直到浏览器中出现连接重置错误。过去一天左右，我一直在试图追查正在发生的事情，但到目前为止还没有运气。
<?php
if (isset($_POST['GetImage'])) {
define('UPLOAD_DIR', 'PDF_Docs/HomeownerAgreements/SigImages/');
$img = $_POST['SaveSig'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
file_put_contents($file, $data);
exit;
?>
<html><body>
<form id="form1" class="default-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post">
<input type="hidden" name="SaveSig" value="" id="SaveSig">
<input type="hidden" name="GetImage" value="Yes" id="GetImage">
<!-- SIGNATURE PAD : begin -->
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<div class="description">Sign Below</div>
<canvas id="signature" width="750" height="150" style="border:1px solid #000000;"></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="form-field">
<button type="button" class="button clear c-button" data-action="clear">Clear Signature</button></div>
</div>
<!-- SIGNATURE PAD : end -->
<!-- SUBMIT BUTTON : begin -->
<div class="form-field">
<button class="submit-btn c-button" type="submit" data-label="Send Message" data-loading-label="Sending..." data-action="send-form">Submit</button>
</div>
<!-- SUBMIT BUTTON : end -->
</div>
</div>
<p> </p>
</form>
<!-- CONTACT FORM : end -->
<!-- SIGNATURE PAD JS : begin -->
<script src="SigPad/js/signature_pad.js"></script>
<script src="SigPad/js/app.js"></script>
<!-- SIGNATURE PAD JS : end -->
</body></html>
app.js 文件包含以下代码：
var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var sendFormButton = wrapper.querySelector("[data-action=send-form]");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
sendFormButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide signature first.");
} else {
document.getElementById('SaveSig').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();
}
});