toDataUrl not is empty

[Pio Luca Valvona]

Hi, I used signature control and also if control is empty, but with background, toDataUrl return a base64 string.

Can I return empty value, if control is empty?

Thanks

[Deepa Loganathan]

Hi Pio Luca,  

 

Greetings from Syncfusion support.  

 

We understood your requirement to return an empty string while setting background image in the Signature control. We have analyzed the feasibility of your requirement and concluded that it is currently not possible to return an empty string when Signature control is rendered with a background image.  

 

This is because while generating data-url, along with the signature content, background image will also be encoded as data-url.  

 

However, you can detect if there is an input to Signature control by comparing the encoded “data-url” strings generated before (that contains only the encoded data of background image) and after changes (data of background image along with signature input) in Signature control in the Change event as depicted in the below code.  

 

var initalurl, newurl; 

               function oncreate(e){  // signature create event 

               

                                           setTimeout(function(){  // set timeout function to get the delay for loading the image in the canvas 

                                            

                                           var obj = $("#apisignature").ejSignature("instance"); 

                                           initalurl = obj._canvas[0].toDataURL(); // take the dataurl and save to a variable 

                                            

                                           }, 1000); 

                                           } 

                                            

                                           function onchange(e){ // signature change event 

                                             newurl = e.lastImage  // take the last drawn image url inside the signature using the lastImage argument 

                                              

                                             initalurl === newurl ? alert("true") : alert("false") // compare to get the difference 

                                           } 

 

For your reference, we have prepared a simple sample in JSplayground.  

 

Sample: http://jsplayground.syncfusion.com/ssbopb3u  

 

If the solution provided does not meet your requirement, kindly get back to us with the requirement you were trying to achieve in your application. So that we can analyze and provide you a solution that suits your application needs.  

 

Regards,  

Deepa L. 

 

[Pio Luca Valvona]

Thank you for your answer. Forgive me for not being clear. I try to explain myself better. I'm using a signature control with an image in the background, even if the control is empty (that is unsigned),  DataUrl returns a value in base64.
How can I tell if there is a signature in the control or is it empty?

[Deepa Loganathan]

Hi Pio Luca,   

 

We understood your requirement to detect if the Signature control is signed or not by detecting the data-url string.  

 

Solution 1. To detect if there is an input in the signature control in initial rendering 

 

Please check the below help page to check if the Signature control is signed or not in the initial rendering of control. 

 

https://help.syncfusion.com/aspnet/signature/how-to#to-check-whether-any-input-to-the-signature-control-since-render  

Solution 2. To detect if there is an input in the signature control after rendering 

 

This can be detected both in server and client side by using the change event of Signature. 

 

Please check our demo pages that showcases the usage of both server and client-side change events.  

 

Server side: https://asp.syncfusion.com/demos/web/signature/serversideevents.aspx  

 

Client side: https://asp.syncfusion.com/demos/web/signature/clientsideevents.aspx  

 

Regards,  

Deepa L. 

 

[Pio Luca Valvona]

Hi Deepa,

I tried the first solution, but also in this case, "Storesnap" contains a value, even if there is no signature. I need to assign to a variable, or the empty string value if there is no signature, or the Base64 value if the signature is there. All this at the press of a button on the user control.

[Deepa Loganathan]

Hi Pio Luca,  

 

We have update our response for your last query in an incident under your Direct Trac account. Please follow up the incident for more details.  

 

  

Please click here to login to your Direct Trac login with the below link.  

  

 

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac   

  

Regards,  

Deepa L. 

[DD]

Hi Pio Luca,  

 

We have update our response for your last query in an incident under your Direct Trac account. Please follow up the incident for more details.  

 

  

Please click here to login to your Direct Trac login with the below link.  

  

 

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac   

  

Regards,  

Deepa L. 

Hi,

What was the answer to this question?

I'm getting the exact same issues and so have no way to check if the signature is empty or not for validation.

Looking at the base64 image that gets generated, looks like it's just a white image with different height x width.

Sometimes it'll be 400 x 300 white space, sometimes 1000 x 600.

I've also tried doing server side validation to detect whether or not it's just a blank white page coming through but even this is not guaranteed as the base64 image is always different - even when it's displaying the same white colours.

Would like to know what's going on which this to add in client side and server side validation on empty screens.

Thanks

[Shameer Ali Baig Sulaiman Ali Baig]

Hi DD, 

 

Greetings from Syncfusion support. 

 

Please, find the suggest solution for this problem. 

 

Instead of using data-URL, you can detect if the Signature is empty or not using one of internal properties (incStep) available in EJSignature. This property will be updated if there was an input to the Signature control at the time of initial rendering.   

  

We have depicted it in the below code snippet.   

  

1. When saveWithBackground property is set as false, use the below solution.

  

  

function oncreate(e){ // create event  

  

              if (this.incStep > 0) { //check the incstep condition  

                 

               alert("have input data,so do something")  

  

             } else{  

               

              alert("no input data,so do something")  

                

             }  

  

  

Demo: http://jsplayground.syncfusion.com/wb5aoirv  

 

2. When saveWithBackground property is set as true, use the below solution.

 

  

function oncreate(e){  

                               

    setTimeout(function(){ // set the same condition inside settimeout  

      var obj = $("#signature").ejSignature("instance");  

                          

    if (obj.incStep > 0) {  

        

      alert("have input data,so do something")  

  

        }   

    else{  

      

        alert("no input data,so do something")  

       

    }  }, 1000);  

  }  

  

  

Demo: http://jsplayground.syncfusion.com/avb4yaso  

 

Regards,  

Shameer Ali Baig S.