How to get a base64 string from imagesource of signature pad?

[Timothy Franceschi]

I'm trying to get a Base64 string from an ImageSource object in C# MAUI .NET 7.0. I'm using SyncFusion Signature Pad component with ToImageSource();

I can't understand how to use this ImageSource and convert it to a base64 string.

I tried also to save the ImageSource into a View.Image as Source and then use View.SaveAsImage() but I'm getting file not found error when I try use the file.

References:

• SyncFusion SignaturePad ToImageSource()
• SyncFusion SignaturePad Documentation

My code attempt (immagine is a view Image. In XAML: <Image id="immagine" />):

private void btnConfermaClicked(object sender, EventArgs e)
    {
        Log.Verbose("Signature confirm clicked");

        ImageSource source_firma = signaturePad.ToImageSource();
        Log.Debug($"Signature as {source_firma.GetType()}");

        immagine.Source = source_firma;

        // Generate random file name
        string fileName = Path.GetRandomFileName() + ".png";

        string folderName = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData);
        string path = Path.Combine(folderName, fileName);
        Log.Debug($"Random path: {path}");

        Log.Verbose("Start saving image");
        try
        {
            immagine.SaveAsImage(path);
        } catch (Exception ex)
        {
            Log.Error($"Error while saving image: {ex.Message}");
        }
        Log.Verbose("Done saving image");

        byte[] bytes = File.ReadAllBytes(path);
        string base64 = Convert.ToBase64String(bytes);
        Log.Debug($"Signature base64: {base64}");
    } 

And this is the log output:

[0:] [19:15:49 VRB] Signature confirm clicked
[0:] [19:15:49 DBG] Signature as Microsoft.Maui.Controls.StreamImageSource
[0:] [19:15:49 DBG] Random path: /data/user/0/com.companyname.iglogestorepresenze/files/eaiktmuj.0gr.png
[0:] [19:15:49 VRB] Start saving image
[gestorepresenz] Explicit concurrent copying GC freed 12995(775KB) AllocSpace objects, 7(5008KB) LOS objects, 84% free, 4446KB/28MB, paused 32us total 14.729ms
[0:] [19:15:49 VRB] Done saving image
**System.IO.FileNotFoundException:** 'Could not find file '/data/user/0/com.companyname.iglogestorepresenze/files/eaiktmuj.0gr.png'.'

[AhamedAliNishad JahirHussain]

Hi Timothy,

We have reviewed your query and created a sample for you. In the sample, we have included a SfSignaturePad, an Image, and a button. After drawing the signature, when the button is clicked, we have included the following code snippet to address the query of how to obtain a base64 string from the ImageSource of the signature pad in button clicked event. With this code, you can now retrieve the base64 string from the ImageSource. Please find the attached sample and refer to the code snippet below.

Code Snippet :

 private async void Button_Clicked(object sender, EventArgs e)

    {

        ImageSource imageSource = signaturepad.ToImageSource();

        Images.Source = imageSource;

 

        string folderPath = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData);

        string fileName = System.IO.Path.GetRandomFileName() + ".png"; // Provide a desired file name

        string filePath = System.IO.Path.Combine(folderPath, fileName);

 

        byte[] imageData;

        if (imageSource is FileImageSource fileImageSource)

        {

            string imagePath = fileImageSource.File;

            imageData = File.ReadAllBytes(imagePath);

        }

        else if (imageSource is StreamImageSource streamImageSource)

        {

            using (Stream stream = await streamImageSource.Stream.Invoke(new CancellationToken()))

            {

                using (MemoryStream memoryStream = new MemoryStream())

                {

                    await stream.CopyToAsync(memoryStream);

                    imageData = memoryStream.ToArray();

                }

            }

        }

        else

        {

            // Handle other types of ImageSource as needed

            return;

        }

      

        File.WriteAllBytes(filePath, imageData);

        byte[] bytes = File.ReadAllBytes(filePath);

        string base64 = Convert.ToBase64String(bytes);

        Debug.WriteLine($"Signature base64: {base64}");

 

    }

Regards,

Ahamed Ali Nishad.

Attachment: TestSignature_2d4912f4.zip

[Alp Altunel]

Hi Ahamed

I am working on Vue version and this ToImageSource or Image source is not existing there.

I cannot get the data as base64 decoded string.

Can you provide an example for this?

Thank you in advance

[Sivaranjith Nagaraj]

Hi Alp Altunel,

 

Thank you for reaching out to us.

 

We have reviewed your query. Based on your statement, it seems that you are working with the Vue version. To assist you better, could you please clarify the type of .NET MAUI application you are using? For example, is it a hybrid application built with Blazor or another framework? Sharing these details will enable us to provide a more precise and tailored solution to address your query.

 

Additionally, if possible, please share a sample application with us. This will help us thoroughly review your implementation and provide a more effective resolution.

 

We appreciate your time and understanding, and we look forward to your response.

 

Regards,

Sivaranjith N.

[Alp Altunel]

Hi Sivaranjith

I am only using a Vue version, no .net or blazor.

I opened a ticket and it was replied and the function getSignature() is missing in component definition.

You can ignore this question. 

Thank you for your reply.

[Preethi Rajakandham]

Hi Alp Altunel,

You are welcome. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Preethi R