将签名板发送到php POST方法。 [英] Send Signature Pad to php POST method.

问题描述

我想使用签名板发布一些数据
这是表格和后端
每次我发布我有一个空图像没有问题
i不知道是图像解码吗？
或它的输入值??

I want to use signature pad to post some data this is the form for the and back end every time i post i got a empty image there is no problem i don't know is it the image decode ? or it's input value ??

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

推荐答案

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

Looks like your script tag executes on page load. You need to execute it right before you submitting your form. Since you are executing it on page load, the canvas would be empty at that time. You have to get the image data from the canvas and set it to the value before submitting so that the draw data is transferred to the form value and in turn goes to server when you submit the form.

如果你有jQuery，你可以尝试类似下面的内容。

If you have jQuery, you may try something like below.

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

First write your signaturePad inside a function like this

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

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

Then, use jQuery to bind the form and call the function before submitting like below

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

这篇关于将签名板发送到php POST方法。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！