Signature pad with timestamp

[Kplus Develope]

Hi there,

does anyone know how to embedd a timestamp on the image obtained by SfSignaturePad?

Thanks,

Tanja

[Ruba Shanmugam]

Hi Tanja, 

 

Greetings from Syncfusion. 

 

We have validated your query and still we need some more information about your exact requirement. Can you please clarify the following, so that we can able to proceed further and provide a better solution as earliest. 

 

1. Where you want to embed the timestamp on the image. 

3. Can you please share any illustration image if possible? 

 

Regards, 

Ruba Shanmugam 

[Kplus Develope]

Hi, something like this. The current Datetime when the signature is saved and it would also be great to read out the text of an entry to add additional information to the signature.

Attachment: DN_1_4_Signature_49590736.zip

[Ruba Shanmugam]

Hi Kplus, 

 

Greetings from Syncfusion. 

 

We have validated your query and prepared a sample as per your requirement. In this sample, when you click the save button the current date and time is saved and displayed using Label property.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_Dropdownopen-889467640 

 

Screenshot: 

 

 

 

We hope that this helps you, if the sample doesn’t meet your requirement kindly revert us with more details, which help us to analyze and resolve your requirement.  

 

Regards, 

Ruba Shanmugam 

[Kplus Develope]

Hi Ruba,

your screenshot looks great, but you have linked the wrong sample.

Regards,

Tanja

[Ruba Shanmugam]

Hi Tanja, 

 

Sorry for the inconvenience. Please get the sample from below link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfSignaturePad_CurrentDateTime1051950657 

 

Regards, 

Ruba Shanmugam 

[Kplus Develope]

Hi Ruba,

thanks for your quick answer. I need to save this label on the image retained from SignaturePad, so that when I save the byte array to a file (i.e. a png file), the timestamp is visible on the image file.

Thanks,

Tanja

[Anandraj Selvam]

Hi Tanja, 

  

Thanks for the update. 

  

We have analyzed your query and we can fulfill your requirement by converting signature pad ImageSource To Bytes and by using that bytes to image as like below code snippet. 

  

 

XAML: 

 

  <StackLayout>  

        <Label Text="Input Your Signature"/>  

        <Frame>  

            <signature:SfSignaturePad   x:Name="signature"  

                                      HeightRequest="250"/>  

        </Frame>  

        <Image x:Name="image"/>  

        <Button Text="ConvertSourceToBytes" Clicked="Button_Clicked"/>  

      

    </StackLayout>   

 

 

C#: 

 

  private void Button_Clicked(object sender, EventArgs e)  

        {  

            signature.Save();  

            if (signature.ImageSource != null)  

            {  

                StreamImageSource streamImageSource = (StreamImageSource)signature.ImageSource;  

                System.Threading.CancellationToken cancellationToken =  

                System.Threading.CancellationToken.None;  

                Task<Stream> task = streamImageSource.Stream(cancellationToken);  

                Stream stream = task.Result;  

                byte[] bytes = new byte[stream.Length];  

                stream.Read(bytes, 0, bytes.Length);  

                signature.Clear();  

            }     

 

 

It saves as ImageSource. We need to call save method before getting the signature pad ImageSource as like below code snippet. 

 

C#: 

 

signature.Save();  

ImageSource signatureSource = signature.ImageSource;   

 

  

We have created sample based on this and please find the sample from below. 

  

Sample: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SignaturePadSample-3657245.zip  

  

Please let us know if you have any other queries. 

  

Regards, 

Anand Raj S.