javascripthtmlcanvassignaturesignaturepad

Signature Pad ToDataURL not working for complex signatures

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
Solution

  • 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