Skip to content

Commit 6562f63

Browse files
feinsteinfeinstein
authored
feat: Add text recognition for bitmap images (#757)
1 parent aa31001 commit 6562f63

File tree

4 files changed

+162
-2
lines changed

4 files changed

+162
-2
lines changed

‎packages/example/lib/main.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import 'vision_detector_views/pose_detector_view.dart';
1616
import 'vision_detector_views/selfie_segmenter_view.dart';
1717
import 'vision_detector_views/subject_segmenter_view.dart';
1818
import 'vision_detector_views/text_detector_view.dart';
19+
import 'vision_detector_views/text_from_widget_view.dart';
1920

2021
Future<void> main() async {
2122
WidgetsFlutterBinding.ensureInitialized();
@@ -60,6 +61,7 @@ class Home extends StatelessWidget {
6061
CustomCard('Image Labeling', ImageLabelView()),
6162
CustomCard('Object Detection', ObjectDetectorView()),
6263
CustomCard('Text Recognition', TextRecognizerView()),
64+
CustomCard('Text From Widget', TextFromWidgetView()),
6365
CustomCard('Digital Ink Recognition', DigitalInkView()),
6466
CustomCard('Pose Detection', PoseDetectorView()),
6567
CustomCard('Selfie Segmentation', SelfieSegmenterView()),

‎packages/example/lib/vision_detector_views/text_from_widget_view.dart

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import 'dart:async';
2+
import 'dart:typed_data';
3+
import 'dart:ui' as ui;
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter/rendering.dart';
7+
import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';
8+
9+
class TextFromWidgetView extends StatefulWidget {
10+
const TextFromWidgetView({Key? key}) : super(key: key);
11+
12+
@override
13+
State<TextFromWidgetView> createState() => _TextFromWidgetViewState();
14+
}
15+
16+
class _TextFromWidgetViewState extends State<TextFromWidgetView> {
17+
final _textRecognizer = TextRecognizer(script: TextRecognitionScript.latin);
18+
final _widgetKey = GlobalKey();
19+
String _extractedText = 'Recognized text will appear here';
20+
bool _isBusy = false;
21+
22+
@override
23+
void dispose() {
24+
_textRecognizer.close();
25+
super.dispose();
26+
}
27+
28+
@override
29+
Widget build(BuildContext context) {
30+
return Scaffold(
31+
appBar: AppBar(
32+
title: const Text('Text From Widget Example'),
33+
),
34+
body: Column(
35+
children: [
36+
Expanded(
37+
child: Center(
38+
child: RepaintBoundary(
39+
key: _widgetKey,
40+
child: Container(
41+
padding: const EdgeInsets.all(16.0),
42+
decoration: BoxDecoration(
43+
color: Colors.white,
44+
border: Border.all(color: Colors.blue, width: 2),
45+
borderRadius: BorderRadius.circular(12),
46+
),
47+
child: const Text(
48+
'This is sample text\nthat will be captured\nand processed using\nthe ML Kit Text Recognizer.\n\nTry different fonts\nand styles to test\nthe recognition capabilities!',
49+
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
50+
),
51+
),
52+
),
53+
),
54+
),
55+
Padding(
56+
padding: const EdgeInsets.all(16.0),
57+
child: ElevatedButton(
58+
onPressed: _isBusy ? null : _extractTextFromWidget,
59+
child: const Text('Capture and Recognize Text'),
60+
),
61+
),
62+
Expanded(
63+
child: SingleChildScrollView(
64+
padding: const EdgeInsets.all(16.0),
65+
child: Column(
66+
crossAxisAlignment: CrossAxisAlignment.start,
67+
children: [
68+
const Text(
69+
'Recognition Result:',
70+
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
71+
),
72+
const SizedBox(height: 8),
73+
Container(
74+
padding: const EdgeInsets.all(12),
75+
decoration: BoxDecoration(
76+
color: Colors.grey[200],
77+
borderRadius: BorderRadius.circular(8),
78+
),
79+
width: double.infinity,
80+
child: Text(_extractedText),
81+
),
82+
],
83+
),
84+
),
85+
),
86+
],
87+
),
88+
);
89+
}
90+
91+
Future<void> _extractTextFromWidget() async {
92+
if (_isBusy) return;
93+
94+
setState(() {
95+
_isBusy = true;
96+
_extractedText = 'Processing...';
97+
});
98+
99+
try {
100+
// Get the RenderObject from the GlobalKey
101+
final RenderRepaintBoundary? boundary = _widgetKey.currentContext
102+
?.findRenderObject() as RenderRepaintBoundary?;
103+
104+
if (boundary == null) {
105+
setState(() {
106+
_extractedText = 'Error: Unable to find widget render object';
107+
_isBusy = false;
108+
});
109+
return;
110+
}
111+
112+
// Capture the widget as an image
113+
final ui.Image image = await boundary.toImage(pixelRatio: 3.0);
114+
115+
// Convert to byte data in raw RGBA format
116+
final ByteData? byteData =
117+
await image.toByteData(format: ui.ImageByteFormat.rawRgba);
118+
119+
if (byteData == null) {
120+
setState(() {
121+
_extractedText = 'Error: Failed to get image byte data';
122+
_isBusy = false;
123+
});
124+
return;
125+
}
126+
127+
final Uint8List bytes = byteData.buffer.asUint8List();
128+
129+
// Create InputImage from bitmap data with dimensions
130+
final inputImage = InputImage.fromBitmap(
131+
bitmap: bytes,
132+
width: image.width,
133+
height: image.height,
134+
);
135+
136+
// Process the image with the text recognizer
137+
final RecognizedText recognizedText =
138+
await _textRecognizer.processImage(inputImage);
139+
140+
setState(() {
141+
_extractedText = recognizedText.text.isNotEmpty
142+
? recognizedText.text
143+
: 'No text recognized';
144+
_isBusy = false;
145+
});
146+
} catch (e) {
147+
setState(() {
148+
_extractedText = 'Error processing image: $e';
149+
_isBusy = false;
150+
});
151+
}
152+
}
153+
}

‎packages/google_mlkit_text_recognition/CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 0.15.0
2+
3+
* Add an example showing how to extract text from a bitmap image with the new `InputImage.fromBitmap()` constructor.
4+
* Bumps the version to support the new `InputImage.fromBitmap()` constructor from `google_mlkit_commons`.
5+
16
## 0.14.0
27

38
* Update dependencies.

‎packages/google_mlkit_text_recognition/pubspec.yaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: google_mlkit_text_recognition
22
description: A Flutter plugin to use Google's ML Kit Text Recognition to recognize text in any Chinese, Devanagari, Japanese, Korean and Latin character set.
3-
version: 0.14.0
3+
version: 0.15.0
44
homepage: https://github.com/flutter-ml/google_ml_kit_flutter
55
repository: https://github.com/flutter-ml/google_ml_kit_flutter/tree/master/packages/google_mlkit_text_recognition
66

@@ -11,7 +11,7 @@ environment:
1111
dependencies:
1212
flutter:
1313
sdk: flutter
14-
google_mlkit_commons: ^0.9.0
14+
google_mlkit_commons: ^0.10.0
1515

1616
dev_dependencies:
1717
flutter_test:

0 commit comments

Comments
 (0)