Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

UmaWorld's avatar

The PHP GD extension is required, but is not installed.

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;
    }
0 likes
2 replies
Tray2's avatar

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.

martinbean's avatar

@umaworld You got an error message saying an extension isn’t installed. So why did you then post a load of unrelated Livewire code? 🤷‍♂️

If you get an error saying an extension is required but not installed, then obviously the solution is to install that extension.

Please or to participate in this conversation.