Отправьте подпись Pad на метод 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);
Источник

2 ответа

Решение

Похоже, ваш тег скрипта выполняется при загрузке страницы. Вы должны выполнить его прямо перед отправкой формы. Так как вы выполняете его при загрузке страницы, холст в это время будет пустым. Вы должны получить данные изображения с холста и установить его в значение перед отправкой, чтобы данные рисования переносились в значение формы и, в свою очередь, отправлялись на сервер при отправке формы.

Если у вас есть 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. 
 });
Источник

Вы не захватываете элемент canvas; toDataURL() работает на элементе холста, в вашем случае это myCanvas,

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

Источник: toDataURL () doc

Источник
Другие вопросы по тегам