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

Question

我想使用签名板发布一些数据 这是后端的形式 每次我发帖时都会得到一张空图像，没有问题 我不知道这是图像解码吗？ 或者它的输入值??

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

Answer 1

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

如果你有 jQuery，你可以尝试下面的方法。

首先将您的签名板写入这样的函数中

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

然后，使用 jQuery 绑定(bind)表单并在提交之前调用函数，如下所示

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