It is currently 8 December 2019, 17:51 Advanced search

SyncFusion JavaScript Example: Signature Capture

Questions and answers on how to best use Instant Developer

Re: SyncFusion JavaScript Example: Signature Capture

Postby lucabaldini » 28 November 2019, 15:41

I had tryied to ask that library to save the file... but it only enabled the user to download an image (that contained the signature). I wanted more... so I tryied to get the internal CANVAS (the DOM object that has the signature) and get the image from it... but I forgot to delete that key in the constructor.

The thing is that it tryies to download an image (that is not there) in the server to clear the signature... without that key should work even in 13.5 with seattle :-)))
User avatar
lucabaldini
Pro Gamma
Pro Gamma
 
Posts: 3808
Joined: 1 October 2010, 17:03
Location: Bologna

Re: SyncFusion JavaScript Example: Signature Capture

Postby lucabaldini » 28 November 2019, 15:43

I've uploaded a new fixed version... can you try with this? :-)

Syncfusion Capture Express LB.zip
(480.4 KiB) Downloaded 9 times
User avatar
lucabaldini
Pro Gamma
Pro Gamma
 
Posts: 3808
Joined: 1 October 2010, 17:03
Location: Bologna

Re: SyncFusion JavaScript Example: Signature Capture

Postby lucabaldini » 28 November 2019, 15:44

I've added a "LB" at the end to distinguish it from my original project... but the original idea is from ljwilson... I don't want to steal it from him!!!! ;-)))))))))))))))))))
User avatar
lucabaldini
Pro Gamma
Pro Gamma
 
Posts: 3808
Joined: 1 October 2010, 17:03
Location: Bologna

Re: SyncFusion JavaScript Example: Signature Capture

Postby Ted Giles » 28 November 2019, 15:56

Oh, the number of times I've done that!
I think my head THINKS I've done something, therefore I am convinced!
User avatar
Ted Giles
 
Posts: 464
Joined: 29 November 2013, 12:58
Location: The Wolds, Lincolnshire, UK

Re: SyncFusion JavaScript Example: Signature Capture

Postby Ted Giles » 28 November 2019, 17:08

Thanks Luca, the Clear Signature is working great now.
User avatar
Ted Giles
 
Posts: 464
Joined: 29 November 2013, 12:58
Location: The Wolds, Lincolnshire, UK

Re: SyncFusion JavaScript Example: Signature Capture

Postby lucabaldini » 29 November 2019, 7:44

Thanks Luca, the Clear Signature is working great now.


Yeah! Cheers! :-)))
User avatar
lucabaldini
Pro Gamma
Pro Gamma
 
Posts: 3808
Joined: 1 October 2010, 17:03
Location: Bologna

Re: SyncFusion JavaScript Example: Signature Capture

Postby rjberry » 2 December 2019, 17:09

Luca,
Thanks for the added functions on the signature code. one problem is I am getting the following error:

Any advise on resolving this?
Thanks,
Rob
Attachments
sigerror.png
sigerror.png (27.56 KiB) Viewed 94 times
rjberry
 
Posts: 20
Joined: 12 November 2013, 13:58

Re: SyncFusion JavaScript Example: Signature Capture

Postby ljwilson » 2 December 2019, 21:21

I'm not Luca, but you will get that error if you click on the "Get Signature" button more than once. Why? Because it triggers the OnCommand Event, which changes your context (i.e. you have made a server call). Even though your form is still on the screen, neither button will work since you really aren't on that form anymore, as far as the browser is concerned.

Using the debugger--when you click on the "Get Signature" button the first time, you will see the signature saved to a string variable. It is up to you to make use of it.

2019-12-02_16-19-21.png
2019-12-02_16-19-21.png (31.59 KiB) Viewed 84 times


...jack
ljwilson
 
Posts: 495
Joined: 26 November 2013, 14:15

Re: SyncFusion JavaScript Example: Signature Capture

Postby lucabaldini » 3 December 2019, 8:04

I think that this had to do with the fact that I was using a "raw" connection with server side with no cookies...

Let's try this instead... I've attached a new version...
What I did was:
1) change the

from
Code: Select all
    function SaveSignature()
    {
      var canvasData = $("#signature")[0].getElementsByTagName("canvas")[0].toDataURL("image/png");
      //
      var xmlHttpReq = false;
      if (window.XMLHttpRequest)
        ajax = new XMLHttpRequest();
      else if (window.ActiveXObject)
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
      //
      ajax.open("POST", "#_ICD_WEB_LOGINURL?CMD=signature", true);
      ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      ajax.onreadystatechange = function() {
        console.log(ajax.responseText);
      }
      ajax.send("imgData=" + canvasData);
    }


to

Code: Select all
    function SaveSignature()
    {
      var canvas = $("#signature")[0].getElementsByTagName("canvas")[0];
      if (!canvas) {
        console.log("NO CANVAS");
        return;
      }
      //
      RD3_SendCommand("signature", "imgData=" + canvas.toDataURL("image/png"));
}


You can find this function into both Desktop files.
As you can see now I'm using a "safe" channel that sends a message to the server... then, as ljwilson was telling, you get the OnCommand event inside your app with image as a parameter.

2) change the way I read the parameter in the OnCommand event. Before the request was a POST request and the image was in the body. So I needed to use the GetSetting function. Now the image data is inside the request, so I need to use the getUrlParam function.

But now it should work :-)

Syncfusion Capture Express LB.zip
(479.67 KiB) Downloaded 3 times
User avatar
lucabaldini
Pro Gamma
Pro Gamma
 
Posts: 3808
Joined: 1 October 2010, 17:03
Location: Bologna

Re: SyncFusion JavaScript Example: Signature Capture

Postby ljwilson » 3 December 2019, 12:55

It does--much smoother now!

Thanks!
...jack
ljwilson
 
Posts: 495
Joined: 26 November 2013, 14:15

Previous

Return to Tips & Tricks

Who is online

Users browsing this forum: No registered users and 4 guests