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

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

如果您有jQuery，可以尝试下面的内容。

首先在这样的函数中写下你的签名板

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

Answer 2

你没有抓住画布元素; toDataURL()适用于canvas元素，在您的情况下myCanvas。

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

来源：toDataURL() doc

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

2 个答案: