發送一個簽名捕獲到PDF與PDF（數據網址）

Question

我花了很多年，並沒有得到任何地方。我有一個簽名捕獲它的工作原理，並在網頁上顯示的圖像：

HTML

<div id="canvas"> 
      <canvas class="roundCorners" id="newSignature" 
      style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas> 
     </div> 
     <script>signatureCapture();</script> 
     <button type="button" onclick="signatureSave()">Apply signature</button> 
     <button type="button" onclick="signatureClear()">Clear signature</button> 
     <br> 
    Saved Image 
     <br> 
     <img name="saveSignature" id="saveSignature"/> 

JS腳本：

function signatureCapture() { 
    var canvas = document.getElementById("newSignature"); 
    var context = canvas.getContext("2d"); 
    canvas.width = 276; 
    canvas.height = 180; 
    context.fillStyle = "#fff"; 
    context.strokeStyle = "#444"; 
    context.lineWidth = 1.5; 
    context.lineCap = "round"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    var disableSave = true; 
    var pixels = []; 
    var cpixels = []; 
    var xyLast = {}; 
    var xyAddLast = {}; 
    var calculate = false; 
    { //functions 
     function remove_event_listeners() { 
      canvas.removeEventListener('mousemove', on_mousemove, false); 
      canvas.removeEventListener('mouseup', on_mouseup, false); 
      canvas.removeEventListener('touchmove', on_mousemove, false); 
      canvas.removeEventListener('touchend', on_mouseup, false); 

      document.body.removeEventListener('mouseup', on_mouseup, false); 
      document.body.removeEventListener('touchend', on_mouseup, false); 
     } 

     function get_coords(e) { 
      var x, y; 

      if (e.changedTouches && e.changedTouches[0]) { 
       var offsety = canvas.offsetTop || 0; 
       var offsetx = canvas.offsetLeft || 0; 

       x = e.changedTouches[0].pageX - offsetx; 
       y = e.changedTouches[0].pageY - offsety; 
      } else if (e.layerX || 0 == e.layerX) { 
       x = e.layerX; 
       y = e.layerY; 
      } else if (e.offsetX || 0 == e.offsetX) { 
       x = e.offsetX; 
       y = e.offsetY; 
      } 

      return { 
       x : x, 
       y : y 
      }; 
     }; 

     function on_mousedown(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      canvas.addEventListener('mouseup', on_mouseup, false); 
      canvas.addEventListener('mousemove', on_mousemove, false); 
      canvas.addEventListener('touchend', on_mouseup, false); 
      canvas.addEventListener('touchmove', on_mousemove, false); 
      document.body.addEventListener('mouseup', on_mouseup, false); 
      document.body.addEventListener('touchend', on_mouseup, false); 

      empty = false; 
      var xy = get_coords(e); 
      context.beginPath(); 
      pixels.push('moveStart'); 
      context.moveTo(xy.x, xy.y); 
      pixels.push(xy.x, xy.y); 
      xyLast = xy; 
     }; 

     function on_mousemove(e, finish) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      var xy = get_coords(e); 
      var xyAdd = { 
       x : (xyLast.x + xy.x)/2, 
       y : (xyLast.y + xy.y)/2 
      }; 

      if (calculate) { 
       var xLast = (xyAddLast.x + xyLast.x + xyAdd.x)/3; 
       var yLast = (xyAddLast.y + xyLast.y + xyAdd.y)/3; 
       pixels.push(xLast, yLast); 
      } else { 
       calculate = true; 
      } 

      context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y); 
      pixels.push(xyAdd.x, xyAdd.y); 
      context.stroke(); 
      context.beginPath(); 
      context.moveTo(xyAdd.x, xyAdd.y); 
      xyAddLast = xyAdd; 
      xyLast = xy; 

     }; 

     function on_mouseup(e) { 
      remove_event_listeners(); 
      disableSave = false; 
      context.stroke(); 
      pixels.push('e'); 
      calculate = false; 
     }; 
    } 
    canvas.addEventListener('touchstart', on_mousedown, false); 
    canvas.addEventListener('mousedown', on_mousedown, false); 
} 

function signatureSave() { 

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default) 
    var dataURL = canvas.toDataURL("image/png"); 
    document.getElementById("saveSignature").src = dataURL; 

}; 




function signatureClear() { 
    var canvas = document.getElementById("newSignature"); 
    var context = canvas.getContext("2d"); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

我想我的PHP然後才考慮此處理後的圖像，並張貼成pdf：

<?php 
require("Forms/Resource/fpdf.php"); 

$pdf = new FPDF(); 
$pdf->AddPage(); 
$pdf->SetFont('Arial','',10); 
$pdf->Write(7,'Signed By:'); 
$pdf->Ln(10); 

//signature 
$pdf->Image($_POST['saveSignature'],null,null,0,0,'png') ; 
//publish 
$pdf->output(); 
?> 

但它無法讀取圖像文件。有人可以向我解釋我哪裏會出錯，以及如何解決這個問題？我現在都已經放棄了。

感謝

菲爾

Answer 1

您需要將圖像數據上傳到服務器和Base64解碼。 的Javascript：

function signatureSave() { 

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default) 
    var dataURL = canvas.toDataURL("image/png"); 
    document.getElementById("saveSignature").src = dataURL; 

    //post base64 encoded image data via ajax 
    var httpRequest = new XMLHttpRequest() 
    httpRequest.onreadystatechange = function (data) { 
     console.log('saved'); 
    } 
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    httpRequest.open('POST', 'url/to/your/file.php'); 
    httpRequest.send('sig=' + encodeURIComponent(dataURL)); 
} 

PHP：

//FPDF requires a file on disk, so save a temp one: 
$tmpname = '/tmp/' . uuid() . '.png'; 
file_put_contents($tmpname, base64_decode($_POST['sig'])); 

//your existing fpdf code here 
$pdf->Image($tmpname,null,null,0,0,'png'); 
//the rest of your code here 
//then remove temp image 
unlink($tmpname);