Seamless Text Extraction from Images Using .NET MAUI and Xamarin
Please, support my blog by clicking on our sponsors ad!
Introduction
Optical Character Recognition (OCR) is a technology that converts different types of documents, such as scanned paper documents, PDF files, or images taken by a digital camera, into editable and searchable data. OCR is widely used for digitizing printed documents, enabling the text to be edited, searched, and stored more compactly. In this blog, we will walk through the implementation of an OCR feature in a .NET MAUI and Xamarin application. We will focus on setting up the necessary packages, configuring the Android manifest, and writing the code to extract text from images using the Plugin.Maui.OCR package.
Step-by-Step Implementation
Prerequisites
- Ensure you have .NET version 8 installed.
- Update the
Microsoft.Maui.ControlsandMicrosoft.Maui.Controls.Compatibilitypackages to version 8.0.21.
Install the Plugin
Install the Plugin.Maui.OCR package version 1.0.11 in your project using the following command:
dotnet add package Plugin.Maui.OCR --version 1.0.11Configure AndroidManifest.xml
In your Android project, update the AndroidManifest.xml file to include the necessary permissions and dependencies:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowbackup="true" android:icon="@mipmap/appicon" android:roundicon="@mipmap/appicon_round" android:supportsrtl="true">
<meta-data android:name="com.google.mlkit.vision.DEPENDENCIES" android:value="ocr">
</meta-data></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE">
<uses-permission android:name="android.permission.INTERNET">
<uses-permission android:name="android.permission.CAMERA">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE">
</uses-permission></uses-permission></uses-permission></uses-permission></manifest>
Modify MauiProgram.cs
In MauiProgram.cs, add the line UseOcr() to register the OCR plugin:
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
})
.UseOcr();Create the MainPage UI
Design the MainPage.xaml to include buttons for picking an image or taking a picture and an editor to display the extracted text:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ImageToText.MainPage">
<ScrollView>
<VerticalStackLayout Padding="30,0" Spacing="25">
<Label Text="Extract Text from Image" Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" />
<Label Text="Welcome to .NET Multi-platform App UI" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2" SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
<Button x:Name="CounterBtn" Text="Pick Image" SemanticProperties.Hint="Picks an image for OCR" Clicked="OnCounterClicked" HorizontalOptions="Fill" />
<Button x:Name="PictureBtn" Text="Take Picture" SemanticProperties.Hint="Takes a picture for OCR" Clicked="PictureBtn_Clicked" HorizontalOptions="Fill" />
<Editor x:Name="txtText" HeightRequest="200"></Editor>
</VerticalStackLayout>
</ScrollView>
</ContentPage>Implement the MainPage Code-Behind
In MainPage.xaml.cs, write the logic to handle image selection, capture, and OCR processing:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
protected async override void OnAppearing()
{
base.OnAppearing();
await OcrPlugin.Default.InitAsync();
}
private async void OnCounterClicked(object sender, EventArgs e)
{
try
{
var pickResult = await MediaPicker.Default.PickPhotoAsync();
if (pickResult != null)
{
using var imageAsStream = await pickResult.OpenReadAsync();
var imageAsBytes = new byte[imageAsStream.Length];
await imageAsStream.ReadAsync(imageAsBytes);
var ocrResult = await OcrPlugin.Default.RecognizeTextAsync(imageAsBytes);
if (!ocrResult.Success)
{
await DisplayAlert("No success", "No OCR possible", "OK");
return;
}
txtText.Text = ocrResult.AllText;
await DisplayAlert("OCR Result", "Convert Successfully", "OK");
}
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
private async void PictureBtn_Clicked(object sender, EventArgs e)
{
try
{
var pickResult = await MediaPicker.Default.CapturePhotoAsync();
if (pickResult != null)
{
using var imageAsStream = await pickResult.OpenReadAsync();
var imageAsBytes = new byte[imageAsStream.Length];
await imageAsStream.ReadAsync(imageAsBytes);
var ocrResult = await OcrPlugin.Default.RecognizeTextAsync(imageAsBytes);
if (!ocrResult.Success)
{
await DisplayAlert("No success", "No OCR possible", "OK");
return;
}
txtText.Text = ocrResult.AllText;
await DisplayAlert("OCR Result", "Convert Successfully", "OK");
}
SemanticScreenReader.Announce("Image Uploaded");
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
}Conclusion
In this blog post, we have demonstrated how to implement an OCR feature in a .NET MAUI and Xamarin application. By setting up the necessary packages and configurations, and writing the code to handle image selection and text extraction, you can create a robust OCR-enabled application. This implementation leverages the powerful Plugin.Maui.OCR package and integrates smoothly with .NET MAUI, providing a seamless user experience for text extraction from images.
#ExtractTextFromImages, #OCR, #NETMAUI, #Xamarin, #MobileDevelopment, #ImageToText, #OCRApp, #TextRecognition, #MAUIApp, #XamarinDevelopment
Posts
Comments
Post a Comment