Comment utiliser signature_pad dans laravel 5.4?

Je travaille sur une simple application web de facture/réception basée sur formulaire qui nécessite l'obtention d'une signature client en utilisant signature_pad. Mon application utilise Laravel 5.4 en raison de la familiarité et de l'échafaudage d'authentification utilisateur intégré.Comment utiliser signature_pad dans laravel 5.4?

Comme preuve de concept, j'ai essayé d'intégrer le code de l'exemple signature_pad dans mon modèle Blade sans chance - le dessin n'a pas lieu. De plus, les actions/écouteurs d'événements associés aux boutons ne fonctionnent pas non plus. Une simple variation du code html du code a pour résultat une signature_pad fonctionnelle (voir ci-dessous), donc je sais que le code tel qu'il est écrit fonctionne très bien - le problème semble être avec Laravel, Vue, Blade, ou le chemin JS est géré à l'intérieur du modèle.

Toute idée ou expertise sur l'utilisation de signature_pad dans un modèle de lame dans Laravel 5.4 ou similaire est appréciée. Je vous remercie.

<!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>

Source

2017-06-22 scott_p

Le problème se pose à partir du modèle créé par boilerplate Laravel hors de la boîte. Par défaut, la disposition du modèle (views/layouts/app.blade.php) est fournie avec une balise de script pour app.js, en raison de l'intégration de Vue2.0, je suppose. La suppression de cet appel permet au JS signature_pad de fonctionner.

Source

2017-06-22 18:26:42

J'ai créé un paquet Laravel qui résume tout cela pour vous: https://github.com/GeneaLabs/laravel-casts. Vous pouvez ou non le trouver utile, je voulais juste partager afin de ne pas avoir à réinventer la roue. :) –

Comment utiliser signature_pad dans laravel 5.4?

Répondre

Questions connexes