[Huawei Developers] riteshchanchal:
View attachment 5207277

Article Introduction

This article provides the demonstration of document skew correction in flutter platform using Huawei ML Kit plugin.

Huawei ML Kit

HUAWEI ML Kit allows your apps to easily leverage Huawei's long-term proven expertise in machine learning to support diverse artificial intelligence (AI) applications throughout a wide range of industries. Thanks to Huawei's technology accumulation, ML Kit provides diversified leading machine learning capabilities that are easy to use, helping you develop various AI apps.

Huawei ML Kit Docuement Skew Correction

Huawei ML Kit Docuement Skew Correction service can automatically identify the location of a document in an image and adjust the shooting angle to the angle facing the document, even if the document is tilted. In addition, you can perform document skew correction at custom boundary points.

Use Cases

HMS ML Kit document skew correction service can be widely used in so many daily life scenarios like;

If a paper document needs to be backed up in an electronic version but the document in the image is tilted, you can use this service to correct the document position.

When recording a card, you can take a photo of the front side of the card without directly facing the card.

When the road signs on both sides of the road cannot be accurately identified due to the tilted position during the trip, you can use this service to take photos of the front side of the road signs to facilitate travel.

Development Preparation

Environment Setup

Android Studio 3.0 or later

Java JDK 1.8 or later

This document suppose that you have already done the flutter SKD setup on your PC and installed the Flutter and Dart plugin inside your Android Studio.

Project Setup

Create a project in App Gallery Connect

Configuring the Signing Certificate Fingerprint inside project settings

Enable the ML Kit API from the Manage Api Settings inside App Gallery Console

Create a Flutter Project using Android Studio

Copy the agconnect-services.json file to the android/app directory of your project

Maven Repository Configuration

1. Open the build.gradle file in the android directory of your project.

Navigate to the buildscript section and configure the Maven repository address and agconnect plugin for the HMS SDK.

buildscript {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}

dependencies {
/*
* <Other dependencies>
*/
classpath 'com.huawei.agconnect:agcp:1.4.2.301'
}
}

Go to allprojects and configure the Maven repository address for the HMS SDK.

allprojects {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
}

2. Open the build.gradle file in the android/app/ directory and add apply plugin: 'com.huawei.agconnect' line after other apply entries.

apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.huawei.agconnect'

3. Set your package name in defaultConfig > applicationId and set minSdkVersion to 19 or higher. Package name must match with the package_name entry in agconnect-services.json file.

4. Set multiDexEnabled to true so the app won't crash. Because ML Plugin has many API's.

defaultConfig {
applicationId "<package_name>"
minSdkVersion 19
multiDexEnabled true
/*
* <Other configurations>
*/
}

Adding the ML Kit Plugin

In your Flutter project directory, find and open your pubspec.yaml file and add the huawei_ml library to dependencies.

dependencies:
huawei_ml: {library version}

You can reference the latest versino of Huawei ML Kit from the below URL.

huawei_ml | Flutter package

HUAWEI Ml Kit plugin for Flutter. It provides diversified leading machine learning capabilities that are easy to use, helping you develop various AI apps.

pub.dev

After adding the plugin, you have to update the package info using below command

[project_path]> flutter pub get

Adding the Permissions

<uses-permission android:name="android.permission.CAMERA " />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Development Process

The following build function contruct the basic UI for the app which demostrates the document skew correction by taking the document photos from camera and gallery.

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: const EdgeInsets.only(
bottom: 10.0, top: 10.0, right: 10.0, left: 10.0),
child: Image.file(
File(_imagePath),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: CustomButton(
onQueryChange: () => {
log('Skew button pressed'),
skewCorrection(),
},
buttonLabel: 'Skew Correction',
disabled: _imagePath.isEmpty,
),
),
CustomButton(
onQueryChange: () => {
log('Camera button pressed'),
_initiateSkewCorrectionByCamera(),
},
buttonLabel: 'Camera',
disabled: false,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: CustomButton(
onQueryChange: () => {
log('Gallery button pressed'),
_initiateSkewCorrectionByGallery(),
},
buttonLabel: 'Gallery',
disabled: false,
),
),
],
),
),
);
}

The following function is responsible for the skew correction operation. First, create the analyzer for skew detection and then the skew detection result can be received asynchronously. After getting the skew detection results, you can get the corrected image by using asynchronous call. After the completion of operation, analyzer should be stopped properly.

void skewCorrection() async {

if (_imagePath.isNotEmpty) {

// Create an analyzer for skew detection.
MLDocumentSkewCorrectionAnalyzer analyzer =
new MLDocumentSkewCorrectionAnalyzer();

// Get skew detection result asynchronously.
MLDocumentSkewDetectResult detectionResult =
await analyzer.asyncDocumentSkewDetect(_imagePath);

// After getting skew detection results, you can get the corrected image by
// using asynchronous call
MLDocumentSkewCorrectionResult corrected =
await analyzer.asyncDocumentSkewResult();

// After recognitions, stop the analyzer.
bool result = await analyzer.stopDocumentSkewCorrection();

var path = await FlutterAbsolutePath.getAbsolutePath(corrected.imagePath);

setState(() {
_imagePath = path;
});
}
}

Conclusion

This article explains how to do the document skew correction using the Huawei ML Kit in Flutter platform. Developers can have a quick reference to jump start with the Huawei ML Kit.

References

https://developer.huawei.com/consum...S-Plugin-Guides/introduction-0000001051432503

GitHub

https://github.com/mudasirsharif/Huawei-ML-Kit-Document-Skew-Correction