javascript - 发送签名板到php POST方法。

我想使用签名板发布一些数据
这是和后端的表单
每次我发帖时我都没有图像，这是没有问题的
我不知道这是图像解码吗？
还是输入值？

    <form action="" method="POST" id="form-submit" name="myform">
    <section>
        <div class="container">
          <div class="boxarea">
            <div class="signature-pad" id="signature-pad">
              <div class="m-signature-pad">
                <div class="m-signature-pad-body">
                  <canvas id="myCanvas" width="625" height="318"></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    <input type="hidden" id='image' name="image" value="">
    <input type="submit" name="submit" value="submit">
  </form>

<script> var imageData = signaturePad.toDataURL(); document.getElementsByName("image")[0].setAttribute("value", imageData); </script>

$img = $_POST['image'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = './signature-image/' . uniqid() . '.png';
$success = file_put_contents($file, $data);
$image=str_replace('./','',$file);

最佳答案

看起来您的脚本标记在页面加载时执行。您需要在提交表单之前立即执行它。由于您是在页面加载时执行的，因此画布在那时将是空的。提交之前，您必须从画布上获取图像数据并将其设置为值，以便将绘制数据传输到表单值，并在提交表单时转至服务器。

如果您使用jQuery，则可以尝试以下类似方法。

首先在这样的函数中编写您的signaturePad

function getSignaturePad() {
 var imageData = signaturePad.toDataURL();
 document.getElementsByName("image")[0].setAttribute("value", imageData);
}

然后，使用jQuery绑定表单并调用函数，然后再提交，如下所示

$('#form-submit').submit(function() {
  getSignaturePad(); // call this function here, sets the imageData right before submitting the form.
  return true; // returning true submits the form.
 });

关于javascript - 发送签名板到php POST方法。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46514484/