-
-
Save raymadrona/2c7602b5d48c81a20e211ee067cb5873 to your computer and use it in GitHub Desktop.
Wrapping SignaturePad and storing base-64 with Alpine.js and Laravel Livewire
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<x-background> | |
<div class="relative shadow-xl bg-white rounded-lg p-6 flex flex-col gap-4"> | |
<x-signature-pad wire:model.defer="signature"> | |
</x-signature-pad> | |
<x-tallui::app.button.primary wire:click="submit" class="text-white"> | |
Submit | |
</x-tallui::app.button.primary> | |
</div> | |
</x-background> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div x-data="signaturePad(@entangle($attributes->wire('model')))"> | |
<h1 class="text-xl font-semibold text-gray-700 flex items-center justify-between"><span>Signature pad</span><x-branding.logo class="w-8 h-8"></x-branding.logo> </h1> | |
<div> | |
<canvas x-ref="signature_canvas" class="border rounded shadow"> | |
</canvas> | |
</div> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script> | |
<script> | |
document.addEventListener('alpine:init', () => { | |
Alpine.data('signaturePad', (value) => ({ | |
signaturePadInstance: null, | |
value: value, | |
init(){ | |
this.signaturePadInstance = new SignaturePad(this.$refs.signature_canvas); | |
this.signaturePadInstance.addEventListener("endStroke", ()=>{ | |
this.value = this.signaturePadInstance.toDataURL('image/png'); | |
}); | |
}, | |
})) | |
}) | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App\Http\Livewire; | |
use Illuminate\Support\Str; | |
use Livewire\Component; | |
class SignatureExample extends Component | |
{ | |
public $signature; | |
public function submit() | |
{ | |
\Storage::put('signatures/signature.png', base64_decode(Str::of($this->signature)->after(','))); | |
} | |
public function render() | |
{ | |
return view('livewire.signature-example'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment