Flutter OCR编辑插件hocr_editor的使用

Flutter OCR编辑插件hocr_editor的使用

简介

hocr_editor 是一个用于 Flutter 的全屏小部件，它能够显示 HOCR（XML）文件，并与原始图像一起展示，允许用户编辑其中的文字。目前版本支持编辑单词和删除单词。未来计划将其扩展为一个完整的编辑器，支持手动添加新单词、搜索和合并块等功能。

依赖项

该插件使用了 dart_hocr 包来与 XML 文件进行交互。

This package uses dart_hocr package for interacting with xml file.

### 编辑控制器
`Editing controller` 允许外部与内容进行交互。


Editing controller allows external interaction with the content.

TODO: 需要文档化编辑控制器的接口。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 hocr_editor 插件。

示例代码

import 'package:flutter/services.dart' show ByteData, rootBundle;
import 'package:dart_hocr/dart_hocr.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hocr_editor/hocr_editor.dart'; // 导入 hocr_editor 包

void main() {
  runApp(const ProviderScope(child: MyApp())); // 使用 Riverpod 管理状态
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'HOCR Editor',
      home: HOCRDemo(), // 主页面
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  [@override](/user/override)
  State<HOCRDemo> createState() => _HOCRDemoState(); // 创建状态类
}

class _HOCRDemoState extends State<HOCRDemo> {
  bool isSaving = false; // 控制保存动画的状态

  // 加载资源文件
  Future<OCRImage?> loadAssets() async {
    final ByteData bytes = await rootBundle.load('assets/sample1.jpg'); // 加载图像文件

    return await OCRImage.fromOCRData(
      image: bytes.buffer.asUint8List(), // 将图像数据转换为 Uint8List
      lang1: 'hi', // 设置语言为印地语
      width: 3024, // 图像宽度
      height: 4032, // 图像高度
      xmlString: await rootBundle.loadString('assets/sample1.hocr'), // 加载 HOCR XML 文件
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea( // 确保内容不会超出屏幕边缘
      child: Scaffold(
        backgroundColor: Colors.transparent, // 背景透明
        body: FutureBuilder( // 异步加载数据
          future: loadAssets(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              // 如果正在加载，显示等待动画
              return Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    Text("Wait while loading the asset resources"), // 提示文字
                    CircularProgressIndicator(), // 加载动画
                  ],
                ),
              );
            }
            if (snapshot.data == null) {
              // 如果加载失败，显示错误提示
              return const Center(
                child: Text("Failed loading the asset resources"),
              );
            }

            return Stack( // 堆叠布局
              children: [
                HOCREditor( // HOCR 编辑器
                  ocrImage: snapshot.data as OCRImage, // 设置 OCR 图像数据
                  ocrViewController: HOCREditingController( // 编辑控制器
                    edit: true, // 启用编辑功能
                    onDiscardImage: () {}, // 取消操作回调
                    onCopyToClipboard: (text) {}, // 复制到剪贴板回调
                    onDictLookup: (String text, {required String lang}) {}, // 字典查询回调
                    onSaveImage: (img) async { // 保存图像回调
                      setState(() {
                        isSaving = true; // 开始保存动画
                      });

                      // 模拟保存逻辑
                      setState(() {
                        isSaving = false; // 结束保存动画
                      });
                      return img;
                    },
                  ),
                ),
                if (isSaving) const Center(child: CircularProgressIndicator()), // 显示保存动画
              ],
            );
          },
        ),
      ),
    );
  }
}