Detect and Crop Documents on Mobile Device - Xamarin C#

This tutorial shows how to live capture documents and auto crop them for viewing on a mobile device in a C# Xamarin application using the LEADTOOLS SDK.

Required Knowledge

Get familiar with the basic steps of creating a project and implementing live capture by reviewing the Add References and Set a License and Integrate Live Capture with Xamarin Camera Control tutorial, before working on the Detect and Crop Documents on Mobile Device - Xamarin C# tutorial.

Create the Project and Add the LEADTOOLS References

In Visual Studio, create a new C# Xamarin project, and add the following necessary LEADTOOLS references.

The references needed depend upon the purpose of the project. For this project, the following NuGet packages are needed:

• Leadtools.Camera.Xamarin
• Leadtools.Viewer.Controls.Xamarin
• Leadtools.Document.Sdk
• Newtonsoft.Json

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

• Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
• Deployment license. If a Deployment license file and developer key are needed, refer to Obtaining a License.

Note

Adding LEADTOOLS NuGet references and setting a license are covered in more detail in the Add References and Set a License tutorial.

Adjust the Live Capture Code

With the project created, the references added, and the license set, coding can begin.

In the Solution Explorer, open the LiveCapturePage.xaml. Edit the xaml code to the code shown below:

<StackLayout> 
    <!--main grid container for everything--> 
    <Grid x:Name="mainGrid" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition x:Name="c0" Width="*"/> 
            <ColumnDefinition x:Name="c1" Width="*"/> 
            <ColumnDefinition x:Name="c2" Width="*"/> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
            <RowDefinition x:Name="r0" Height="*"/> 
            <RowDefinition x:Name="r1" Height="*"/> 
            <RowDefinition x:Name="r2" Height="*"/> 
            <RowDefinition x:Name="r3" Height="*"/> 
            <RowDefinition x:Name="r4" Height="*"/> 
            <RowDefinition x:Name="r5" Height="*"/> 
            <RowDefinition x:Name="r6" Height="*"/> 
            <RowDefinition x:Name="r7" Height="*"/> 
            <RowDefinition x:Name="r8" Height="*"/> 
        </Grid.RowDefinitions> 
        <namespace:CameraView x:Name="leadCamera"  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="8" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/> 
        <Button x:Name="liveCapture" Text="Live Capture" Grid.Row="8" Grid.Column="1" Clicked="liveCapture_Clicked"/> 
    </Grid> 
</StackLayout> 

Right-click the page and select View Code or press F7, to bring up the code behind the page. Ensure that the statements below are in the using block.

using System; 
using Xamarin.Forms; 
using Xamarin.Forms.Xaml; 
using Leadtools; 
using Leadtools.Camera.Xamarin; 
using Leadtools.ImageProcessing.Core; 

Add the global variable below to the class.

AutoCapture autoCapture = new AutoCapture(); 

Modify the liveCapture_Clicked(object sender, EventArgs e) event to include the following code.

private void liveCapture_Clicked(object sender, EventArgs e) 
{ 
    // Tapping the Live Capture button will hook the FrameReceived Event handler, allowing processing each frame  
    if (liveCapture.Text == "Live Capture") 
    { 
        liveCapture.Text = "Stop"; 
        leadCamera.FrameReceived += LeadCamera_FrameReceived; 
        leadCamera.Camera.FocusMode = Leadtools.Camera.Xamarin.FocusMode.Continuous; 
        autoCapture.CaptureMethod = AutoCapture.AutoCaptureMethod.DocumentDetection; 
    } 
    else 
    { 
        liveCapture.Text = "Live Capture"; 
        leadCamera.FrameReceived -= LeadCamera_FrameReceived; 
    } 
} 

Modify the LeadCamera_FrameReceived(Leadtools.Camera.Xamarin.FrameHandlerEventArgs e) event to include the code below. This event sets off auto detection, crop down, noise removal in a mobile device picture, and sends it to the Image Viewer.

private void LeadCamera_FrameReceived(Leadtools.Camera.Xamarin.FrameHandlerEventArgs e) 
{ 
    using (RasterImage _img = e.Image.Clone()) 
    { 
        if (autoCapture.CheckHoldStability(_img)) 
        { 
            leadCamera.FrameReceived -= LeadCamera_FrameReceived; 
 
            RasterImage _image = e.Image.Clone(); 
 
            PerspectiveDeskewCommand _cmd = new PerspectiveDeskewCommand(); 
            _cmd.Run(_image); 
 
            Device.BeginInvokeOnMainThread(() => 
            { 
                App.Current.MainPage = new NavigationPage(new ViewerPage(_image)); 
            }); 
        } 
    } 
} 

Add the Image Viewer Code

In Solution Explorer, right-click on the base C# project and select Add -> New Item. Select the Content Page option and name the class ViewerPage.xaml.

Add the xaml code below to create the grid that will host the ImageViewer object.

<Grid x:Name="imageViewerContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Black"/> 

Right-click the page and select View Code or press F7, to bring up the code behind the page. Ensure that the statements below are in the using block.

using System; 
using Xamarin.Forms; 
using Xamarin.Forms.Xaml; 
using Leadtools; 
using Leadtools.Controls; 

Add the global variable below to the class.

private RasterImage _image; 

For the ViewerPage() public method, add RasterImage document to its parameters. Add the code to the ViewerPage(RasterImage document) method.

public ViewerPage(RasterImage document) 
{ 
    InitializeComponent(); 
 
    _image = document; 
    InitImageViewer(); 
} 

Create a new method named InitImageViewer(). Add the code below to initialize the ImageViewer and set the document image inside it. Be sure to call this method inside the ViewerPage() method, as shown above.

private async void InitImageViewer() 
{ 
    ImageViewer _imageViewer = new ImageViewer 
    { 
        ViewHorizontalAlignment = ControlAlignment.Center, 
        ViewVerticalAlignment = ControlAlignment.Center, 
        BackgroundColor = Color.FromHex("#1E1E1E"), 
        VerticalOptions = LayoutOptions.FillAndExpand, 
        HorizontalOptions = LayoutOptions.FillAndExpand, 
        Margin = new Thickness(0, 0), 
        AutoDisposeImages = true, 
    }; 
    Grid.SetRow(_imageViewer, 0); 
    Grid.SetRowSpan(_imageViewer, 1); 
    ImageViewerPanZoomInteractiveMode panZoom = new ImageViewerPanZoomInteractiveMode(); 
    _imageViewer.InteractiveModes.Add(panZoom); 
 
    _imageViewer.Zoom(ControlSizeMode.FitAlways, 1.0, _imageViewer.DefaultZoomOrigin); 
 
    imageViewerContainer.Children.Add(_imageViewer); 
 
    _imageViewer.Image = _image; 
} 

The code above is mostly derived from the Display Images in an Image Viewer tutorial.

Run the Project

Select the desired project (iOS or Android) and run the project by pressing F5, or by selecting Debug -> Start Debugging.

If the steps were followed correctly, the application runs and it will ask to allow Camera permissions which is required. For testing, click the Live Capture button at the bottom of the device's screen. A preview from the device's camera will be displayed in the CameraView. Hold the camera still over the document, keeping the entire document in the camera view. The document will be detected, cropped and then displayed in the ImageViewer.

Wrap-up

This tutorial showed how to use the CameraView, AutoCapture, and PerspectiveDeskewCommand classes to detect and crop a document using a mobile device's camera.

See Also

• LEADTOOLS CameraView Documentation
• LEADTOOLS AutoCapture Documentation
• LEADTOOLS PerspectiveDeskewCommand Documentation
• LEADTOOLS ImageViewer Documentation
• LEADTOOLS SDK Download