How can I verify that I drew something in the jSignature panel or not?

Question

jSignature has a canvas and has a class. How can I check jSignature, did I draw something or not?

I added one binding for the click event.

 $sigdiv.bind('click', function(e) { $("#num_strok").val(parseInt($("#num_strok").val()) + 1); }); 

The problem even is that I click on some corner, and num_strock incremented. And for some drags, it will not increase.

I tried on Google whether there is any built-in isEmpty function or not. But I didn’t find anything.

Answer 1

  if( $sigdiv.jSignature('getData', 'native').length == 0) { alert('Please Enter Signature..'); } 

Answer 2

According to the jSignature website, the getData function exists in the API. If you use the getData function in the empty signature area as a link, you can use getData whenever you want and compare it to an empty link. Then you could say if something was written in the signature area.

This is just a guess on my part, since I have not used this script, but I think something like this will work.

EDIT

I also found this on the website

The dom element on which jSignature is initialized emits a "change", an event immediately after a stroke is added to the vault. (In other words, when the user draws each stroke. If the user draws 3 strokes, this event is emitted 3 times after each move.)

Here's how you would get attached to this event:

 $("#signature").bind('change', function(e){ /* 'e.target' will refer to div with "#signature" */ }) 

The event is generated asynchronously through the "stream" (setTimeout (..., 3)), so you do not need to wrap the event handler in a "stream" of any kind, as the jSignature widget will continue and will not wait when you finish your custom event handler logic .

Did you fail to set the flag variable, which will be set to true in the first change event? This would mean that something is being written to the area

Answer 3

You can check the base30 vector if there are any dots.

 var isSignatureProvided=$sigdiv.jSignature('getData','base30')[1].length>1?true:false; 

Answer 4

It's very late to the party ... So I wanted to contribute to my conclusions, each of which is associated with using $("#sigDiv").jSignature('getData', 'putSomethignInHere') function to verify the signature.

Here are the parameters that I examined for the second attribute passed to the jSignature function:

native returns an object object .length == 0 when the sig field is empty, and .length > 0 when there is something in the sig field. If you want to know how many strokes only the length of this object uses. NOTE. According to jSignature documentation:

"Stroke = mousedown + mousemoved * n (+ mouseup, but we don’t record that it was an end / no movement indicator)"

base30 also returns an object. Here I looked at the information in the second index position of this object. x = $("#sigDiv").jSignature('getData', 'base30')[1].length > 0 ? TRUE : FALSE x = $("#sigDiv").jSignature('getData', 'base30')[1].length > 0 ? TRUE : FALSE Here x will be TRUE if the field was signed, and FALSE when the jSig field is left untouched.

In my case, I used the base30 attribute to verify the signature , not just "did the user do something?" x = $("#sigDiv").jSignature('getData', 'base30')[1].length > {insertValueHere} ? TRUE : FALSE x = $("#sigDiv").jSignature('getData', 'base30')[1].length > {insertValueHere} ? TRUE : FALSE . To check if the user is really subscribed to the field and gave more than just ".". small "x". The return value of the second index received from base30 becomes more like complexity. Thus, if the user really only entered the point, x = $("#sigDiv").jSignature('getData', 'base30')[1].length will be about 5. The resulting value just gets bigger and bigger the bigger user draws in a field. The highest length that I recorded during my testing was 2272. And I scratched and scratched in the box for all 15 seconds.

According to jSig documentation:

base30 (alias image / jSignature; base30) (EXPORT AND IMPORT format) (VECTOR) is a compression format supported by base 64, configured for absurd compactness and native url compatibility. This is a "native" data structure, compressed into a compact string representation of all vectors.

image is a choice that I would avoid to check. It creates an object with a long string in the second index position. The last thing I measured was 672 characters. Using image creates a string regardless of whether the sig field is empty or in use. And to make things more impractical, the line created is different for the empty signature field in Chrome styles by the empty signature style in FF Developer. I am sure that the value of image used, but just not verified.

svgbase64 - this is similar to image with exceptions. Unlike image , using svgbase64 yields a longer, shorter string in second position. Also, this line is the same when I ran the Chrome FF Developer check. Here I stopped my testing. Therefore, I assume that you can use svgbase64 for verification.

These are my conclusions, yours may differ. Please do not hold my low reputation against me.

Answer 5

Search code in javascript file. Check when they hide the Undo Stroke block.

 t.dataEngine.data.length 

This will help you find out how many strokes are done on the signature panel.

Answer 6

This worked for me, part using the roch code: it basically assigns a signature to the hidden text area before sending it for verification:

 <div id="signatureparent"> <div id="signature"></div> <label for='signature_capture' class='error'></label> </div> <span style="visibility:hidden;"> <textarea name="signature_capture" class="required" id="signature_capture"></textarea> </span> <script> $(document).ready(function(){ $('#submit').click(function() { var isSignatureProvided=$('#signature').jSignature('getData','base30')[1].length>1?true:false; if (isSignatureProvided) { var $sigdiv = $("#signature"); var datapair = $sigdiv.jSignature("getData", "svgbase64"); var data = $('#signature').jSignature('getData'); $("#signature_capture").val(data); } }); }); </script> 

Answer 7

Perhaps try something like this (assuming your signature fields have a class "signature") ...

 $('.signature').each(function (index) { var datapair = $(this).jSignature("getData", "svgbase64"); if (datapair[1].length > 1000 ) { // Signature is valid; do something with it here. } }); 

Answer 8

The best answer:

 if($sigdiv.jSignature('getData', 'native').length == 0) { alert('Please Enter Signature..'); } 

The following error appeared:

 $sigdiv.jSignature(...) is undefined 

Therefore, I would suggest using:

 if(typeof($sigdiv.jSignature('getData', 'native')) != 'undefined') { alert('Please Enter Signature..'); } 

Answer 9

Unfortunately, none of the existing answers worked for me. On my site, I have two methods for entering signatures: manual and jSignature ('importData', imgBase64) Testing jSignature ('getData', 'native') worked only for manual drawing. And nothing worked for the image in the way. The solution was simple. Just check the canvas element. It probably won't work for IE9, but who cares. Here it is in TypeScript:

 isSignatureBlank() { var canvas = <any>$('#signatureElem').find("canvas")[0]; if (!canvas) return true; this.emptyCanvas = this.emptyCanvas || document.createElement('canvas'); this.emptyCanvas.width = canvas.width; this.emptyCanvas.height = canvas.height; return canvas.toDataURL() == this.emptyCanvas.toDataURL(); } 

Taken from here: How to check if the canvas is empty?