Flutter类Google Lens应用如何通过Google/Firebase ML Kit实现点选图片文字

前置依赖配置 #

优先使用官方维护的Google ML Kit Flutter套件，无需绑定 Firebase 即可使用离线文字识别能力，配置步骤如下：

• 在pubspec.yaml中添加依赖：

  google_mlkit_text_recognition: ^0.13.0
  

• 安卓端将android/app/build.gradle中的minSdkVersion调整为21及以上
• iOS端在Info.plist中添加相机/相册访问权限声明，同时将最低支持版本调整为iOS 12.0及以上

核心文字识别逻辑 #

1. 初始化对应语言的文字识别器，支持多语言脚本选择：

   // 可选脚本包括latin、chinese、japanese、korean、devanagari等
   final textRecognizer = TextRecognizer(script: TextRecognitionScript.chinese);
   

2. 将相机采集/相册选择的图片转换为ML Kit要求的InputImage格式，注意正确传入图片的旋转角度，避免后续坐标偏移。
3. 调用识别接口获取结构化识别结果：

   final RecognizedText recognizedText = await textRecognizer.processImage(inputImage);
   

   识别结果RecognizedText按层级返回TextBlock（文本块）、TextLine（文本行）、TextElement（单词/单字），每个层级的对象都携带*全局唯一的边界框坐标（boundingBox）*和四个角的点位坐标，是点击匹配的核心依据。

点击选字交互实现 #

核心逻辑是完成点击坐标和识别结果边界框的匹配，步骤如下：

• 首先做坐标对齐：因为前端显示的图片是经过缩放、居中适配容器的，和输入识别器的原始图片尺寸不一致，需要先计算统一缩放比和图片在容器内的偏移量，公式为：

  final scale = min(displayContainer.width / originalImage.width, displayContainer.height / originalImage.height);
  final offsetX = (displayContainer.width - originalImage.width * scale) / 2;
  final offsetY = (displayContainer.height - originalImage.height * scale) / 2;
  

• 监听图片容器的点击事件，拿到点击点位相对于容器的坐标(tapX, tapY)，转换为原始图片上的对应坐标：

  final originalTapX = (tapX - offsetX) / scale;
  final originalTapY = (tapY - offsetY) / scale;
  

• 遍历所有识别返回的TextElement，判断originalTapX、originalTapY是否落在当前TextElement.boundingBox范围内，命中即选中对应文字。
• 选中后可通过CustomPaint组件在对应文字位置绘制半透明高亮矩形，给用户可视化反馈。

优化建议 #

• 识别结果可本地缓存，无需每次触发点击都重新执行识别逻辑
• 支持滑动多选时，可监听滑动事件生成选框范围，匹配所有与选框相交的TextElement即可
• 页面销毁时调用textRecognizer.close()释放识别器资源，避免内存泄漏

内容的提问来源于stack exchange，提问作者Md Usama