Flutter进阶:基于 MLKit 的 OCR 文字识别

一、需求来源

今天无意中发现了一个OCR 中英文识别准确率非常高(测试图中99%,错了一个汉字)的库 google_mlkit_text_recognition ,分享给大家。

二、使用示例

scala 复制代码
//
//  OcrPhotoDemo.dart
//  flutter_templet_project
//
//  Created by shang on 2024/11/16 10:52.
//  Copyright © 2024/11/16 shang. All rights reserved.
//

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';
import 'package:image_picker/image_picker.dart';

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

  @override
  _OcrPhotoDemoState createState() => _OcrPhotoDemoState();
}

class _OcrPhotoDemoState extends State<OcrPhotoDemo> {
  File? _imageFile;
  String _recognizedText = "请上传图片进行文字识别";

  final _picker = ImagePicker();
  final _textRecognizer = TextRecognizer(script: TextRecognitionScript.chinese);

  Future<void> _pickImage() async {
    final image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      _imageFile = File(image.path);
      _recognizedText = "正在识别文字...";
      setState(() {});
      _processImage(_imageFile!);
    }
  }

  Future<void> _processImage(File imageFile) async {
    final inputImage = InputImage.fromFile(imageFile);

    try {
      final recognizedText = await _textRecognizer.processImage(inputImage);
      _recognizedText = recognizedText.text.isEmpty ? "未检测到文字" : recognizedText.text;
      setState(() {});
    } catch (e) {
      _recognizedText = "识别失败:$e";
      setState(() {});
    }
  }

  @override
  void dispose() {
    _textRecognizer.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("文字识别")),
      body: Scrollbar(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              if (_imageFile != null) Image.file(_imageFile!) else Icon(Icons.image, size: 100, color: Colors.grey),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: ElevatedButton(
                  onPressed: _pickImage,
                  child: Text("选择图片"),
                ),
              ),
              Text(
                _recognizedText,
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

三、使用指南

最后、总结

没什么可说的,目前 flutter 中使用最简单好用的库,强烈推荐!

注意点:

此包默认只支持拉丁字符的识别,如果需要识别其他语言,需要手动添加依赖。

对于 iOS 平台,在ios/Podfile文件中手动添加:

dart 复制代码
# Add language package you need to use
pod 'GoogleMLKit/TextRecognitionChinese', '~> 7.0.0'
pod 'GoogleMLKit/TextRecognitionDevanagari', '~> 7.0.0'
pod 'GoogleMLKit/TextRecognitionJapanese', '~> 7.0.0'
pod 'GoogleMLKit/TextRecognitionKorean', '~> 7.0.0'

对于 Android 平台,在android/app/build.gradle文件中添加:

dart 复制代码
dependencies {
    // Add language package you need to use
    implementation 'com.google.mlkit:text-recognition-chinese:16.0.0'
    implementation 'com.google.mlkit:text-recognition-devanagari:16.0.0'
    implementation 'com.google.mlkit:text-recognition-japanese:16.0.0'
    implementation 'com.google.mlkit:text-recognition-korean:16.0.0'
}

github

相关推荐
程序员爱钓鱼2 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel9 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友11 小时前
什么是API签名?
前端·后端·安全
会豪13 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子13 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶13 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子13 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233313 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts