Flutter文字识别插件ocr_scan_text的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter OCR Scan Text

OCR Flutter v1.3.1

Flutter OCR Scan Text 是一个围绕“Google ML kit Text Recognition”库的包装器。它帮助从相机中准确地搜索和显示文本结果。它还允许管理图像或PDF中的文本搜索。

特性

允许您轻松地从相机扫描文本,提取准确的结果并将其显示给用户。

结果按 Block 列表返回。

  • 一个 Block 包含:块的整体文本、Lines 列表和位置。
  • 一个 Line 包含:行的整体文本、Elements 列表和位置。
  • 一个 Element 包含:单词和位置。

注意:该库使用 Camera 包,请确保请求权限。

使用方法

在 pubspec.yaml 中添加包:

dependencies:
  ocr_scan_text: 1.3.1

导入库:

import 'package:ocr_scan_text/ocr_scan_text.dart';

显示带有相机的文字检测小部件:

LiveScanWidget(
  ocrTextResult: (ocrTextResult) {},
  scanModules: [ScanAllModule()],
)

LiveScanWidget 需要一个模块列表来启动检测。验证结果将返回到 “matchedResult” 方法。

创建扫描模块:

在本示例中(参见 /example 文件夹),我们考虑所有 Elements 为结果。

创建一个扫描模块:

class ScanAllModule extends ScanModule {
  ScanAllModule() : super(
    label: 'All',
    color: Colors.redAccent.withOpacity(0.3),
    validateCountCorrelation: 1,
  );

  @override
  Future<List<ScanResult>> matchedResult(List<TextBlock> textBlock, String text) async {
    List<ScanResult> list = [];
    for (var block in textBlock) {
      for (var line in block.lines) {
        for (var element in line.elements) {
          list.add(ScanResult(cleanedText: element.text, scannedElementList: [element]));
        }
      }
    }
    return list;
  }
}

启动模块:

module.start();

停止模块:

module.stop();

使用 Widget 扫描文件(支持扩展名:png, jpg 和 pdf)

StaticScanWidget(
  ocrTextResult: (ocrTextResult) {},
  scanModules: [ScanAllModule()],
  file: File("path/image.png"),
);

不使用 Widget 扫描文件(支持扩展名:png, jpg 和 pdf)

此方法打开相册选择图片并开始文本分析。(请先验证权限)

OcrScanService([module]).startScanWithPhoto();

此方法打开文件夹选择文件并开始文本分析。(请先验证权限)

OcrScanService([module]).startScanWithOpenFile();

此方法开始文本分析

OcrScanService([module]).startScanProcess(File('path/image.png'));

辅助工具

您可以使用 TextBlockHelper 方法来帮助查找结果。

  • TextBlockHelper.extractTextElementsWithRegex:查找与正则表达式匹配的元素列表
  • TextBlockHelper.nextTextElement:查找右侧或左侧的下一个 TextElement
  • TextBlockHelper.combineRecreateTextLine:当文本在同一行但距离较远时,MLKit 可能会创建两个不同的 TextBlock。“combineRecreateTextLine” 方法将从起始 TextElement 开始创建一个 TextLine
  • TextBlockHelper.combineLeftTextElement:返回起始元素左侧的所有 TextElement 包括起始元素
  • TextBlockHelper.combineRightTextElement:返回起始元素右侧的所有 TextElement 包括起始元素
  • TextBlockHelper.combineBetweenTextElement:返回起始元素和结束元素之间的所有 TextElement

示例代码

import 'package:flutter/material.dart';
import 'package:ocr_scan_text/ocr_scan_text.dart';
import 'package:ocr_scan_text_example/scan_all_module.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Scan"),
      ),
      body: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width - 20,
          height: MediaQuery.of(context).size.height - 40,
          child: _buildLiveScan(),
        ),
      ),
    );
  }

  Widget _buildLiveScan() {
    return LiveScanWidget(
      ocrTextResult: (ocrTextResult) {
        ocrTextResult.mapResult.forEach((module, result) {});
      },
      scanModules: [ScanAllModule()],
    );
  }
}

更多关于Flutter文字识别插件ocr_scan_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文字识别插件ocr_scan_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用ocr_scan_text插件进行文字识别的代码示例。这个插件可以帮助你从图像中提取文本。

步骤1:添加依赖

首先,你需要在pubspec.yaml文件中添加ocr_scan_text插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  ocr_scan_text: ^0.x.x  # 请检查最新版本号并替换

步骤2:导入插件

在你的Dart文件中(例如main.dart),导入该插件:

import 'package:flutter/material.dart';
import 'package:ocr_scan_text/ocr_scan_text.dart';

步骤3:使用插件

下面是一个完整的示例,展示了如何使用ocr_scan_text插件进行文字识别:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OcrScreen(),
    );
  }
}

class OcrScreen extends StatefulWidget {
  @override
  _OcrScreenState createState() => _OcrScreenState();
}

class _OcrScreenState extends State<OcrScreen> {
  String extractedText = "";

  Future<void> scanTextFromImage(File imageFile) async {
    try {
      final result = await OcrScanText.scanText(imageFile.path);
      setState(() {
        extractedText = result.text;
      });
    } catch (e) {
      print("Error scanning text: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OCR Scan Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Extracted Text:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              extractedText,
              style: TextStyle(fontSize: 16),
              maxLines: 5,
              overflow: TextOverflow.ellipsis,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 这里你可以选择一个图像文件,例如从文件选择器中选择
                // 这里只是示例,直接使用一个已有的文件路径
                final imagePicker = ImagePicker();
                final pickedFile = await imagePicker.pickImage(source: ImageSource.camera);
                
                if (pickedFile != null) {
                  final file = File(pickedFile.path);
                  await scanTextFromImage(file);
                }
              },
              child: Text('Scan Text from Image'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. 权限:确保你的应用在AndroidManifest.xmlInfo.plist中添加了必要的权限,比如相机和文件访问权限。
  2. 图像选择器:上面的代码示例使用了image_picker插件来选择图像。如果你还没有添加这个依赖,你需要在pubspec.yaml中添加它:
dependencies:
  image_picker: ^0.x.x  # 请检查最新版本号并替换
  1. 错误处理:在生产环境中,你应该添加更多的错误处理逻辑来确保应用的稳定性。

通过上述步骤,你应该能够在Flutter应用中实现基本的文字识别功能。

回到顶部