如何在laravel 5.4中使用signature_pad？

我正在製作一個簡單的基於表單的發票/收據網絡應用程序，需要使用signature_pad獲取客戶簽名。由於熟悉度以及內置的用戶身份驗證腳手架，我的應用程序使用Laravel 5.4。如何在laravel 5.4中使用signature_pad？

作爲概念證明，我試圖從signature_pad示例將代碼嵌入到我的Blade模板中，但沒有運氣 - 繪圖沒有發生。此外，與按鈕關聯的動作/事件偵聽器也不起作用。

代碼的直接html文件變體導致功能性signature_pad（見下文），所以我知道寫入的代碼工作得很好 - 問題似乎與Laravel，Vue，Blade或者方式JS在模板內處理。

對於在Laravel 5.4或類似的刀片模板中使用signature_pad的任何洞察力或專業知識，都很感激。謝謝。

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Testing</title> 
 
\t </head> 
 

 
\t 
 
\t <body> 
 
\t \t <div class="wrapper"> 
 
\t   <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas> 
 
\t  </div> 
 
\t  <div> 
 
\t   <button id="save">Save</button> 
 
\t   <button id="clear">Clear</button> 
 
\t  </div> 
 
\t </body> 
 

 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script> 
 

 

 
\t <script> 
 
\t \t var signaturePad = new SignaturePad(document.getElementById('signature-pad'), { 
 
\t \t backgroundColor: 'rgba(255, 255, 255, 0)', 
 
\t \t penColor: 'rgb(0, 0, 0)' 
 
\t \t }); 
 
\t \t var saveButton = document.getElementById('save'); 
 
\t \t var cancelButton = document.getElementById('clear'); 
 

 
\t \t saveButton.addEventListener('click', function (event) { 
 
\t \t var data = signaturePad.toDataURL('image/png'); 
 

 
\t \t // Send data to server instead... 
 
\t \t window.open(data); 
 
\t \t }); 
 

 
\t \t cancelButton.addEventListener('click', function (event) { 
 
\t \t signaturePad.clear(); 
 
\t \t }); 
 

 

 
\t </script> 
 

 
</html>

來源

2017-06-22 scott_p

問題由Laravel創建開箱即用的樣板模板出現。默認情況下，模板佈局（views/layouts/app.blade.php）帶有app.js的腳本標記，這是由於我認爲Vue2.0搭配。完全刪除此調用可使signature_pad JS正常工作。

來源

2017-06-22 18:26:42

我已經創建了一個Laravel包，它爲您抽象出所有這些：https：//github.com/GeneaLabs/laravel-casts。你可能會也可能不會覺得有幫助，只是想分享，所以你不必重新發明輪子。 :) –

如何在laravel 5.4中使用signature_pad？

回答

相關問題