Flutter图片流转换插件convert_native_img_stream的使用

简介

convert_native_img_stream 是一个用于将 ImageFormatGroup.nv21 或 ImageFormatGroup.bgra8888 转换为 JPEG 文件的插件。这个插件主要适用于使用 ML Kit 或其他处理单平面原生格式（如 NV12 或 BGRA）帧的情况，并且你希望从 CameraImage 对象中保存处理后的帧。该插件可以帮助你将帧转换为内存或文件中的 JPEG 格式。

示例用法

示例代码

以下是一个完整的示例代码，展示了如何使用 convert_native_img_stream 插件从相机流中捕获帧并将其转换为 JPEG 图像。

import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:convert_native_img_stream/convert_native_img_stream.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  final _convertNativeImgStreamPlugin = ConvertNativeImgStream();

  static List<CameraDescription> _cameras = [];
  CameraController? _controller;
  int _cameraIndex = -1;
  bool capture = false, converting = false;
  Uint8List? imageBytes;

  @override
  void initState() {
    super.initState();
    initializeCamera();
  }

  @override
  void dispose() async {
    super.dispose();
    await _controller?.stopImageStream();
    await _controller?.dispose();
    _controller = null;
  }

  void initializeCamera() async {
    if (_cameras.isEmpty) {
      _cameras = await availableCameras();
    }
    for (var i = 0; i < _cameras.length; i++) {
      if (_cameras[i].lensDirection == CameraLensDirection.back) {
        _cameraIndex = i;
        break;
      }
    }
    if (_cameraIndex != -1) {
      final camera = _cameras[_cameraIndex];
      _controller = CameraController(
        camera,
        // 主要解决的问题，将 NV12 流转换为 JPEG 格式
        ResolutionPreset.high,
        enableAudio: false,
        imageFormatGroup: Platform.isAndroid
            ? ImageFormatGroup.nv21
            : ImageFormatGroup.bgra8888,
      );
      _controller?.initialize().then((_) {
        _controller?.startImageStream((image) {
          if (capture) {
            setState(() {
              converting = true;
            });
            _controller?.stopImageStream();
            _controller?.pausePreview();
            _convertNativeImgStreamPlugin
                .convertImgToBytes(
                  image.planes.first.bytes,
                  image.width,
                  image.height,
                )
                .then((value) {
                  imageBytes = value;
                  converting = false;
                  setState(() {});
                });
          }
        });
        if (!mounted) {
          return;
        }
        setState(() {});
      });
    }
  }

  Widget _body() {
    if (_cameras.isEmpty) return Container();
    if (_controller == null) return Container();
    if (_controller?.value.isInitialized == false) return Container();
    if (converting) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    return Container(
      color: Colors.black,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          if (imageBytes == null)
            Center(
              child: CameraPreview(
                _controller!,
              ),
            )
          else
            Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                mainAxisSize: MainAxisSize.max,
                children: [
                  const Expanded(
                    flex: 10,
                    child: Center(
                      child: Text(
                        "Converted image",
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
                      ),
                    ),
                  ),
                  Expanded(flex: 90, child: Image.memory(imageBytes!, fit: BoxFit.cover)),
                ],
              ),
            ),
          if (imageBytes == null)
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                ElevatedButton(
                  onPressed: () {
                    capture = true;
                  },
                  child: const Text("Pause & Convert Frame"),
                ),
              ],
            ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: _body(),
      ),
    );
  }
}

代码说明

1. 初始化相机：

   • 使用 availableCameras() 获取可用的摄像头列表。
   • 选择后置摄像头（如果有）。
   • 初始化 CameraController 并设置图像格式组为 ImageFormatGroup.nv21（Android）或 ImageFormatGroup.bgra8888（iOS）。

2. 开始图像流：

   • 使用 startImageStream 方法开始从相机获取图像帧。
   • 在 startImageStream 的回调中，检查是否需要捕获当前帧（通过 capture 变量控制）。

3. 捕获和转换帧：

   • 如果需要捕获当前帧，停止图像流并暂停预览。
   • 使用 convertNativeImgStreamPlugin.convertImgToBytes 方法将帧数据转换为 JPEG 格式的字节流。
   • 将转换后的字节流存储在 imageBytes 中，并更新 UI。

4. 显示图像：

   • 如果 imageBytes 不为空，显示转换后的图像。
   • 否则，显示相机预览。

5. 按钮操作：

   • 提供一个按钮，点击后设置 capture 为 true，触发帧捕获和转换。

通过以上步骤，你可以轻松地从相机流中捕获帧并将其转换为 JPEG 图像。希望这个示例对你有所帮助！