Ich arbeite an einer einfachen formularbasierten Rechnung/Beleg-Web-App, die erfordert, eine Kundensignatur unter Verwendung signature_pad zu erhalten. Meine App verwendet Laravel 5.4 aufgrund der Vertrautheit und der integrierten Benutzerauthentifizierung Gerüst.Wie benutze ich signature_pad in Laravel 5.4?
Als Beweis des Konzepts habe ich versucht, Code aus dem Signature_pad-Beispiel in meine Blade-Vorlage ohne Glück einzubetten - Zeichnung findet nicht statt. Darüber hinaus funktionieren Aktionen/Ereignislistener, die den Schaltflächen zugeordnet sind, nicht.
Eine direkte html-Datei Variation des Codes ergibt ein funktionales signature_pad (siehe unten), so weiß ich, dass der Code wie geschrieben gut funktioniert - das Problem scheint entweder mit Laravel, Vue, Blade oder der Weg zu sein JS wird innerhalb der Vorlage behandelt.
Alle Einsichten oder Fachkenntnisse zur Verwendung von signature_pad in einer Blade-Vorlage in Laravel 5.4 oder ähnlich sind willkommen. Vielen Dank.
<!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>
Ich habe ein Laravel-Paket erstellt, das all das für Sie abstrahiert: https://github.com/GeneaLabs/laravel-casts. Sie können es vielleicht nicht hilfreich finden, wollten es nur teilen, damit Sie das Rad nicht neu erfinden müssen. :) –