Xamarin Forms Using SignaturePad - Get Image and Base64 value

Post Views: 1,715

Xamarin forms SignaturePad example:
In this post we will integrate SignaturePad control with Xamarin forms application. Once the signature is captured, we will convert it into an image and display it on Image control and also we will convert signature’s value into base64 string. This can be useful when we have to upload an image on the server or give base64 image value to a Web API. So let’s begin.

DOWNLOAD SOURCE CODE.

In your Xamarin forms project install the following nuget package: Xamarin.Controls.SignaturePad.Forms

This package will help us in capturing the user signature.

Create a xaml layout page in your app with name SignatureSample.xaml and edit it as given below. The page contains a Signature pad control for taking signature from users, a button to submit the signature, an ImageView for displaying the given signature and a Label control for display the base64 value of the signature.

SignatureSample.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.SignatureSample"
xmlns:signature="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms">
<ContentPage.Content>
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Padding="10">

<signature:SignaturePadView x:Name="signature" HorizontalOptions="FillAndExpand" StrokeColor="Blue"
VerticalOptions="StartAndExpand" HeightRequest="300" MinimumHeightRequest="300" />

<Button x:Name="btnSubmit" Text="Submit Signature" HorizontalOptions="FillAndExpand"
VerticalOptions="Start" Visual="Material" Clicked="BtnSubmit_Clicked"/>

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="210"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>

</Grid.RowDefinitions>
<Image x:Name="imgSignature" Grid.Row="0" Grid.Column="0" HeightRequest="200" WidthRequest="200"
Margin="2" VerticalOptions="Start" HorizontalOptions="Start"/>

<Label Text="Base64 string of Signature" Margin="2" VerticalOptions="Start" HorizontalOptions="Start"
Grid.Row="1" Grid.Column="0"/>
<Label x:Name="lblBase64Value" Grid.Row="2" Grid.Column="0" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" Margin="2"/>
</Grid>

</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

SignatureSample.xaml.cs:

using System;
using System.IO;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamSample
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SignatureSample : ContentPage
{
public SignatureSample ()
{
InitializeComponent ();
}

private async void BtnSubmit_Clicked(object sender, EventArgs e)
{
try
{
var image = await signature.GetImageStreamAsync(SignaturePad.Forms.SignatureImageFormat.Png);
var mStream = (MemoryStream)image;
byte[] data = mStream.ToArray();
string base64Val = Convert.ToBase64String(data);
lblBase64Value.Text = base64Val;
imgSignature.Source = ImageSource.FromStream(()=> mStream);

}
catch(Exception ex)
{
await DisplayAlert("Error", ex.Message.ToString(), "Ok");
}
}
}
}

Once you signed and press on the submit button, the click function will be called and it will obtain an image stream from the signature pad control. I’m using SignaturePad.GetImageStreamAsync function of the package to get ImageStream. This stream is converted into MemoryStream and in byte[] array.