Need to add "save signature" instead of downloading a file

[mikexwolf]

Hello and thank you for an amazing thing!

I am not very good in JS and need to somehow add a save signature option and submit it as a form string, something like that.

Do you think it would be doable? Any advice is very welcome and appreciated

[UziTech]

You can use signaturePad.toDataURL() to get the image as a base64 string then send it to the backend.

[mikexwolf]

There's one more thing I can't quite figure out.. scaling the pad is done dynamically which is amazing, but I would like to keep its aspect ration to 3 by 4 (to accommodate a background image with a very specific ratio).. I am looking at the JS and can't quite see where this should go.. thanks in advance! And sorry for the noob questions, I really am just learning the ropes of this business

[UziTech]

signature pad doesn't change the size of the canvas. If it is scaling dynamically it isn't signature pad doing it.

[mikexwolf]

Got it. Then is there a way to keep the canvas at a certain ratio? So that the height scales alongside the width? Sorry if I'm not making much sense here..

[UziTech]

That depends on where in your code the size is being set dynamically. Where ever it is being set just make sure it is always setting the height and width to the correct ratio.

[mikexwolf]

Okay thanks!

[Mattuxlabs]

Hello and thank you for an amazing thing!

I am not very good in JS and need to somehow add a save signature option and submit it as a form string, something like that.

Do you think it would be doable? Any advice is very welcome and appreciated

Hey Mike, Just worked on a php solution to the above but it really doesn't require PHP i created a textarea field in html set it as readonly hidden. I assigned it an id then in the javascript code i called the textarea and stored the base 64 value to the textfield. This way when i click submit it pushes the value as post to my post processing service. On the processing side make sure you set the database field to blob to store the base 64 . hope this helps.
Here is my html snippet.
<textarea name="SignatureCode" id="SignatureCode" hidden readonly></textarea>

Here is my javascript Code Snippet I repurposed the save to PNG Button (sorry was lazy) goes in app.js
savePNGButton.addEventListener("click", function (event) { if (signaturePad.isEmpty()) { alert("Please provide a signature first."); } else { var dataURL = signaturePad.toDataURL(); var SignatureCodeOutput = document.getElementById('SignatureCode'); var CodeDisplay = SignatureCodeOutput.innerHTML = dataURL; console.log(CodeDisplay); } });

[abhi051002]

hey can you just help me in the same situation but i'm working on filamentphp and laravel how to save the signature??