Laravel 5.7 e-Signature (Digital Signature)

Do you have a specific digital signature provider you need to use?

There are laravel wrappers for docusign

https://github.com/Tucker-Eric/Laravel-Docusign

Never used this so YMMV

@D9705996 I have a jQuery signature pad plugin, but stuck on how to store it into the database

Can you share details of the plugin you are using e.g. project url

@D9705996 link to DEMO of the plugin http://szimek.github.io/signature_pad/

@lawkunchi - From the documentation it looks like you need to add the following HTML/javascript to your form to get the signature pad setup.

...
<canvas></canvas> //This is where the singature pad will appear
...

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

The when you post your form you will need to pass in the signature data using

    signaturePad.toDataURL();

You will then need to store this data in your database. The documentation has some PHP examples you can use to get you started.

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

Obviously you will need to tailor the above to the rest of your application but should get you started

@D9705996 How do store the signature data as an image as per laravel perspective, 'm a newbie so I don not understand what you said

You need to usd the storage facade to save the image to your server

use Illuminate\Support\Facades\Storage;


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

Storage::put('signature.jpg', $decode_image);

https://laravel.com/docs/5.7/filesystem#storing-files

You will need to amend the first argument to put to match the filename you want to save the image as. The variable $data_uri will need to be changed to be the data you send from you frontend in the request

Hey all, I am also using Signature Pad and 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.