We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

toDataUrl not is empty

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

7 Replies

DL Deepa Loganathan Syncfusion Team January 18, 2019 06:16 AM

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.  
 
 
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. 
 



PL Pio Luca Valvona January 18, 2019 09:48 AM

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?


DL Deepa Loganathan Syncfusion Team January 18, 2019 12:42 PM

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. 
 
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.  
 
 
 
Regards,  

Deepa L.
 
 



PL Pio Luca Valvona January 18, 2019 01:15 PM

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.


DL Deepa Loganathan Syncfusion Team January 21, 2019 07:03 AM

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.  
  
 
  
Regards,  
Deepa L. 



DD DD replied to Deepa Loganathan August 5, 2020 06:45 PM

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.  
  
 
  
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


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team August 6, 2020 02:14 PM

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")  
                
             }  
  
  


 
  1. 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);  
  }  
  
  
 
Regards,  
Shameer Ali Baig S. 


Loader.
Live Chat Icon For mobile
Up arrow icon