JQuery Mobile форма представления с подписью изображения

Question

Я использую JQuery Signare Pad здесь, с источником и демо: http://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html

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

Я вношу свою форму в PDF конвертер под названием MPDF используя модифицированную версию этого: http://mpdf1.com/manual/index.php?tid=373

То, что я хотел бы сейчас, чтобы получить от этого изображений на странице, чтобы быть изображением на PDF, так как когда вы нажимаете кнопку «Отправить», он не знает, как это сделать.

Я не самый опытный в PHP, поскольку я учусь, когда я иду, любая помощь будет принята с благодарностью.

Обновленный код, предоставляемый Thanasis Grammatopoulos

function fun_submit() { 
if(isSign) { 
    var canvas = $("#canvas").get(0); 
    var imgData = canvas.toDataURL(); 
    //Here the code change, do not display image, sent it to the server 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: { 
      imgBase64: imgData 
     } 
    }).done(function(o){ 
     alert('Submited.'); 
    }); 

    closePopUp(); 
} else { 
    alert('Please sign'); 
} 

}

PHP:

<?php 
define('UPLOAD_DIR', 'up/'); 
$img = $_POST['imgData']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = UPLOAD_DIR . uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
?> 

Тем не менее только обеспечивает .png файл 0Kb на сервере ни с чем в нем. Куда я иду отсюда?

Answer 1

Вам просто нужно отправить изображение на сервер. Изменить код:

function fun_submit() { 
    if(isSign) { 
     var canvas = $("#canvas").get(0); 
     var imgData = canvas.toDataURL(); 
     //Here the code change, do not display image, sent it to the server 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: { 
       imgBase64: imgData 
      } 
     }).done(function(o){ 
      alert('Submited.'); 
     }); 

     closePopUp(); 
    } else { 
     alert('Please sign'); 
    } 
} 

Больше информации здесь: How to save a HTML5 Canvas as Image on a server