Level 73
Then you need to install it, and how you do that depends on your operating system.
For Ubuntu you can run sudo apt-get install php-gd don't forget to restart you server (apache/nginx) after.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
form with signaturepad using laravel livewire i can able to save in db and also public/storage i could not see singature in pdf pdf.blade.php
<p>Agile Courts Construction Company</p>
<div style="margin: 10px 0;">
<img src="{{ $data->signature }}" alt="" style="height: 40px;">
</div>
<div style="border-bottom: 1px solid black; width: 100%;"></div>
<p>Bruce Bauer</p>
</td>```
signaturepad
``` <div class="mt-6">
<label class="block text-sm font-medium leading-6 text-gray-900">Signature</label>
<div class="mt-2 border border-gray-300 rounded-md">
<canvas id="signatureCanvas" class="block"></canvas>
<input type="hidden" id="signature" name="signature">
</div>
@error('signature')
<span id="signature-error" class="error text-red-500">{{$message}}</span>
@enderror
</div>```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('signatureCanvas');
if (canvas) {
console.log('enter')
const signaturePad = new SignaturePad(canvas);
console.log(signaturePad)
// Listen to form submission
document.querySelector('#form').addEventListener('submit', function(e) {
console.log('submission')
e.preventDefault();
const signatureData = signaturePad.toDataURL(); // Get signature data as base64 string
console.log(signatureData);
Livewire.emit('saveSignature', signatureData);
// @this.set('signature', signaturePad.toDataURL());
//Livewire.emit('submit');
});
}
});
</script>```
livewire component
public function submit()
{
$this->validate();
//dd('submitted');
Log::info('Signature Data:', [$this->proposal]);
$signaturePath = $this->storeSignature($this->signature);
Log::info($signaturePath);
$this->proposal->update([
'work_to_be_performed' => $this->work_to_be_performed,
'customer' => $this->customer,
'customer_name' => $this->customer_name,
'construction_of' => $this->construction_of,
'send_proposal_to' => $this->send_proposal_to,
'signature' => $signaturePath,
'overseas_conditions' => $this->overseas_conditions,
'base' => $this->base,
'court_preparation' => $this->court_preparation,
'surfacing' => $this->surfacing,
'fence' => $this->fence,
'lights' => $this->lights,
'court_accessories' => $this->court_accessories,
'fee' => $this->fee,
'provisions' => $this->provisions,
'conditions' => $this->conditions,
'guarantee' => $this->guarantee,
'credit' => $this->credit,
]);
$this->dispatchBrowserEvent(
'alert',
['type' => 'success', 'message' => 'Proposal Updated Successfully!', 'title' => 'Success']
);
}
public function storeSignature($signature)
{
$signature = str_replace('data:image/png;base64,', '', $signature);
$signature = str_replace(' ', '+', $signature);
$signatureName = 'signatures/' . uniqid() . '.png';
$imagePath = storage_path('app/public/' . $signatureName);
// Save the image
Storage::disk('public')->put($signatureName, base64_decode($signature));
// Convert to base64 for embedding in PDF
$imageData = base64_encode(file_get_contents($imagePath));
$imageSrc = 'data:image/png;base64,' . $imageData;
return $imageSrc;
}
Please or to participate in this conversation.