jQuery Mobile的形式提交與簽名圖像

Question

我使用jQuery Signare墊在這裏發現，與源和演示： http://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html

現在它是所有顯示您簽名的圖像，當你點擊完成。因此，現在在頁面上顯示圖像，當我提交表單時，如何才能完成此操作。

我使用的這個修改後的版本提交我的形式稱爲MPDF一個PDF轉換器：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); 
?> 

仍只提供沒有在它的服務器上的0KB .png文件。 我從哪裏出發？

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