Saving Result of Signature Pad

Question

This may be a silly question...but how do I save the signature created by the signature pad?

I've got a binding to the ImageSource property - but as far as I can tell this is only really useful for binding to an Image control. In other places in the app I'm converting my images to Base64 strings so ultimately I'll need to do that here too. But in the meantime I'm wondering if there's a built in mechanism for saving the output of the signature pad that I've missed.

Matt · Answer

Further to the initial query below, I have found that after signing on the signature pad, the control's ImageSource property is null. So I'm very confused about how to save this at the moment.

Matt · Answer

Further to the initial query below, I have found that after signing on the signature pad, the control's ImageSource property is null. So I'm very confused about how to save this at the moment.

Just on that last one, I've found that calling the .Save() method on the control is required to populate the ImageSource property.

I've got this working now by jumping through some hoops, but still keen to see what the Syncfusion way of doing this would be.

Sakthivel Palaniyappan · Answer

Hi Matt,Greetings from Syncfusion.We have analyzed your query and yes, we need to call save method for save the signature. We can save the signature by calling Save method of SfSignaturePad control. We have created sample based on your requirement and please find the sample from below.Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/SignaturePadSample-1483474419.zip Please let us know if you have any other queries.Regards,Sakthivel P.

Enrique Velez · Answer

Hello Sakthivel PalaniyappanI tried to set up your example to my  own program but with unsuccessful results. It generates an empty file (0 bytes).Can you advice me how can I get to save the sign image in a right way ? ThanksEnrique async void OnButtonClickedCheckIn(object sender, EventArgs e)        {            try            {                    firma.Save();             SignaturePadSource = firma.ImageSource;                //******************************               if (firma.ImageSource != null)               {                StreamImageSource streamImageSource = (StreamImageSource)firma.ImageSource;                System.Threading.CancellationToken cancellationToken =                System.Threading.CancellationToken.None;                Task<Stream> task = streamImageSource.Stream(cancellationToken);                Stream stream = task.Result;                    // store bytes                    byte[] bytes = new byte[stream.Length];                    stream.Read(bytes, 0, bytes.Length);                                     string fileNameFirma = "storage/emulated/0/Android/data/com.companyname.confirmasmart/files/Pictures/Xamarin/res001firma.jpg";                                    FileStream copyFileStream = File.Create(fileNameFirma);                   {                    stream.CopyTo(copyFileStream);                    copyFileStream.Close();                    }               }            //******************************                        }                       catch (Exception)            {            }        }

Sakthivel Palaniyappan · Answer

Hi Enrique,Greetings from Syncfusion.We have analyzed your query and checked the reported issue with converting bytes to ImageSource and bind the ImageSource to image. Its working as expected, sample we tried that can be download from below.Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/SignaturePadSample-641649167.zipCould you please check the sample with reported issue and let us know issue resolved are not. If still you are facing the same issue, please modify the sample with reported issue and revert us. It will help us to provide better solution at the earliest.Regards.Sakthivel P.

Enrique Velez · Answer

Thanks a lot Sakthivel. !I could save the sign image into my Android device. :-)Thank You Sincerely Enrique

Sakthivel Palaniyappan · Answer

Hi Enrique,Thanks for the update.We are glad to know that reported problem has been resolved at your end. Please let us know if you need further assistance on this.Regards,Sakthivel P.

Tim Belvin · Answer

How do you save the signature as a jpg/png and so that it can be uploaded to cloud storage (e.g. Firebase Storage)

Tim Belvin · Answer

Nevermind - figured it out from your sample code. For those that were curious, here is what I did:

signaturePad.Save();

if(signaturePad.ImageSource != null)

{

StreamImageSource streamImageSource = (StreamImageSource)signaturePad.ImageSource;

System.Threading.CancellationToken cancellationToken = System.Threading.CancellationToken.None;

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

Stream stream = image.Result;

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

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

string fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "sig.png");

using (var fileStream = new FileStream(fileName,FileMode.Create, FileAccess.Write))

{

fileStream.Seek(0, SeekOrigin.End);

await fileStream.WriteAsync(bytes, 0, bytes.Length);

Debug.WriteLine($"Size = {fileStream.Length}");

}

Debug.WriteLine($"{fileName}");

}

Suganya Sethuraman · Answer

Hi Tim,We have achieved your requirement by using SfImageEditor. We have assigned the ImageSource of SfSignaturePad to the Source property of SfImageEditor when we click the “ConvertSourceToBytes” button. When we press the "Save as png" button, the sign is saved in the device as a png image.Please have a sample for your reference.Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SignaturePadSample-114384097 Please check and let us know if you have any concerns.Regards,Suganya Sethuraman.