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

RomanD's avatar

Upload Signature (Signature Pad)

Hey all, I am using Signature Pad (http://szimek.github.io/signature_pad/ . It was set up according to: https://laracasts.com/discuss/channels/laravel/laravel-57-e-signature-digital-signature). Anyway I feel kind of lost. Saved file cant be opened no matter what I try. Error: Could not open file. Further the file is saved at public/ and i would like to save it in public/signatures/ with an individual name. Have the following code added:

VIEW:

<div class="form-row mb-3">
              
              <div class="wrapper mb-3">
                <canvas id="signature-pad" class="signature-pad" width=400 height=200 required name="signature"></canvas>
              </div>
            </div>

JS:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
<script>
            var canvas = document.querySelector("canvas");

            // Adjust canvas coordinate space taking into account pixel ratio,
            // to make it look crisp on mobile devices.
            // This also causes canvas to be cleared.
            function resizeCanvas() {
                // When zoomed out to less than 100%, for some very strange reason,
                // some browsers report devicePixelRatio as less than 1
                // and only part of the canvas is cleared then.
                var ratio =  Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }

            window.onresize = resizeCanvas;
            resizeCanvas();

            var signaturePad = new SignaturePad(canvas, {
              backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
            });

            
            var dataURL = canvas.toDataURL();

            signaturePad.toDataURL("data:image/png;base64,signature");

CONTROLLER:

$data_uri = "data:image/png;base64,signature";
        $encoded_image = explode(",", $data_uri)[1];
        $decoded_image = base64_decode($encoded_image);
        Storage::put('signature.png', $decoded_image);

Would really appreciate any help.

0 likes
0 replies

Please or to participate in this conversation.