1

I am using the Signature pad made by szimek (https://github.com/szimek/signature_pad), which I have no issues with in getting the dataURL.

enter image description here

However, when i draw plenty of lines onto the canvas, the URL returned by toDataURL() results in a an error indicating that the site cant be reached enter image description here

Can someone please point me in the right direction? What could possibly have been done wrongly

---EDIT--- After following the suggestion made by @Sourabh Kumar

var signatureDataURL = objOfSignaturePads[manual_ticket_id].toDataURL('image/jpeg');

I can now access the data url without running into any errors however the signatures are cut off with a grey area appended below

enter image description here

Code

var fd = new FormData();

function getTicketFieldDataForSubmission(manual_ticket_id, fd){
    $( "#manual-complexform-fields-container"+manual_ticket_id ).children('textarea,select,input,.m-signature-pad').each(function (index, ele) {
        // if(jQuery(ele).attr('type')!='file'){
        //     console.log("MADE IN IN HERE123");
        //     console.log(jQuery(ele));
        //     fd.append(jQuery(ele).attr('name'),jQuery(ele).val());
        // }
        if(jQuery(ele).attr('class')=='m-signature-pad'){
            console.log('FOUND M SIGNATURE PAD');
            if(objOfSignaturePads.hasOwnProperty(manual_ticket_id)) {
                console.log(manual_ticket_id);
                console.log(objOfSignaturePads);
                var signatureDataURL = objOfSignaturePads[manual_ticket_id].toDataURL('image/png');
                fd.append('signature_data',signatureDataURL);
            }
        }
        else{
            fd.append(jQuery(ele).attr('name'),jQuery(ele).val());
        }
         });
enter code here
Yeo Bryan
  • 331
  • 4
  • 24

2 Answers2

0

Use this .toDataURL("image/png");

Add this css to set the height and width of signature-pad

 .signature-pad{
    height: *your_preffered_value* px !important;
    width: *your_preffered_value* px !important;
  }

I have used !important to override the existing CSS!

Sourabh Kumar
  • 79
  • 7
  • After adding that line I am no longer receiving error however the image of the signature seems to be cut off if there is too much drawing on the canvas. I have updated the question to reflect the signature being cut off @Sourabh Kumar – Yeo Bryan Sep 29 '21 at 10:34
  • Share some blocks of code so I can help you! or you can check my repository https://github.com/sourabhbit/whiteboard-react-base64tobinary – Sourabh Kumar Sep 29 '21 at 10:36
  • I have added some code into the initial question, please point my in the right direction thanks! – Yeo Bryan Sep 29 '21 at 10:41
  • I have tried your recommended solution but to no avail. I have no issues with viewing the drawn signature on the canvas, the issue is only when i try to view the signature by opening the data url on a new tab. The content seems to be cut off – Yeo Bryan Sep 29 '21 at 11:01
0

After more testing, I found the error due to be the size of the converted toDataURL have exceeded the maximum allowed length of the mySQL text field type of 65,535 characters.

Changing the field type to medium text did the trick for me

Yeo Bryan
  • 331
  • 4
  • 24