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>  

---

你没有抓住画布元素

toDataURL（）

在canvas元素上工作，在您的示例中是

myCanvas

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

var canvas=document.getElementById（'myCanvas'）；
var imageData=canvas.toDataURL（）；
document.getElementsByName（“图像”）[0].setAttribute（“值”，imageData）；

---

来源：

您没有抓取画布元素

toDataURL（）

在canvas元素上工作，在您的示例中是

myCanvas

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

var canvas=document.getElementById（'myCanvas'）；
var imageData=canvas.toDataURL（）；
document.getElementsByName（“图像”）[0].setAttribute（“值”，imageData）；

---

来源：

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

如果您有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. 
 });

---

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

如果您有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. 
 });

---

您应该检查您的网络请求并查看发布了哪些数据。将

.setAttribute（“value”，imageData）

更改为

.setAttribute（“src”，imageData）

imageData

只是一个url。@clabe45当我将其更改为.setAttribute（“src”，imageData）时，它没有传递任何urldata@Tetsh你怎么知道它没有传递任何数据？你试过获取这个属性吗？@clabe45当我使用它时，我得到了一个0Kb的图像。。。在正常情况下，我得到一张4.13kb的空白图像。你应该检查你的网络请求，看看发布了什么数据。将

.setAttribute（“value”，imageData）

更改为

.setAttribute（“src”，imageData）

imageData

只是一个url。@clabe45当我将其更改为.setAttribute（“src”，imageData）时，它没有传递任何urldata@Tetsh你怎么知道它没有传递任何数据？你试过获取这个属性吗？@clabe45当我使用它时，我得到了一个0Kb的图像。。。正常情况下，我得到了一张4.13kb的空白图像非常感谢。。。这是完美的解决方案非常感谢你。。。这是完美的解决方案