Flutter图像处理插件opencv

Flutter图像处理插件opencv_3的使用

OpenCV_3

该包包含了OpenCV模块的实现，使用的版本为3.4.5，适用于Android和iOS平台。

Null安全 Pub 包许可证

关于此版本

兼容性

开发用于集成OpenCV 3.4.5版本的人工视觉库。
兼容Android和iOS。
考虑到与流行的Flutter包（如image_picker）的易用性，可以处理来自图库或相机的图像。具体实现示例可参见这里，在本例中需要配置pubspect.yaml以支持Null安全。

实现的OpenCV模块

图像处理
- 图像过滤
  - bilateralFilter
  - blur
  - boxFilter
  - dilate
  - erode
  - filter2D
  - gaussianBlur
  - laplacian
  - medianBlur
  - morphologyEx
  - pyrDown
  - pyrMeanShiftFiltering
  - pyrUp
  - scharr
  - sobel
  - sqrBoxFilter
- 其他图像变换
  - adaptiveThreshold
  - distanceTransform
  - threshold
- 颜色空间转换
  - cvtColor
- OpenCV中的颜色映射
  - applyColorMap

图像处理

所有处理均通过图像字符串路径进行。
从asset文件夹中的Flutter图像配置在pubspec.yaml文件中。默认
来自URL的图像。
使用image_picker从图库或相机获取图像。

语法

方法调用和图像处理常量的语法类似于Python，例如：
```
Cv2.cvtColor
Cv2.COLOR_BGR2GRAY
```

安装

1. 添加依赖

在你的项目pubspec.yaml文件中添加以下内容：

dependencies:
  opencv_3: ^1.0.0

2. 安装

在命令行中运行以下命令：

$ flutter pub get

3. 导入

在Dart代码中导入：

import 'package:opencv_3/opencv_3.dart';

如何使用

前置条件

如果要处理asset路径中的图像，无需在Android和iOS上配置权限。
如果要处理来自URL的图像，无需配置。
如果要使用image_picker包来处理来自相机和图库的图像，请遵循Android和iOS上的权限设置。
Null安全 如果要测试示例，需要在pubspec.yaml中配置：

environment:
  sdk: ">=2.12.0 <3.0.0"

类

Cv2: 包含OpenCV模块实现的类。
CVPathFrom: 允许配置处理图像的路径。
- URL (静态常量): 配置Web图像的OpenCV。
- GALLERY_CAMERA (静态常量): 配置来自image_picker包的图像的OpenCV。
- ASSETS (静态常量): 配置pubspec.yaml中的Flutter图像 – assets/test.jpg。

模块：图像过滤

原始图像

双边滤波

必须在一个async函数中调用

Uint8List _byte = await Cv2.bilateralFilter(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        diameter: 20,
        sigmaColor: 75,
        sigmaSpace: 75,
        borderType: Cv2.BORDER_DEFAULT,
      );

      setState(() {
        _byte;
      });

展示结果在图像小部件中

Image.memory(
      _byte,
      width: 300,
      height: 300,
      fit: BoxFit.fill,
    )

注意：如果要处理来自网络的图像，必须配置pathFrom: CVPathFrom.URL，并在pathString中替换为URL，例如：pathString: 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/313f8e114930481.6044f05fcd866.jpeg'

膨胀

Uint8List _byte = await Cv2.dilate(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        kernelSize: [3, 3],
      );

      setState(() {
        _byte;
      });

filter2D

Uint8List _byte = await Cv2.filter2D(
        pathFrom: CVPathFrom.URL,
        pathString:
          'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/634dba114930481.6044f05fcb2dd.jpeg',
        outputDepth: -1,
        kernelSize: [2, 2],
      );

      setState(() {
        _byte;
      });

中值模糊

Uint8List _byte = await Cv2.medianBlur(
        pathFrom: CVPathFrom.URL,
        pathString:
          'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/16fe9f114930481.6044f05fca574.jpeg',
        kernelSize: 19,
      );

      setState(() {
        _byte;
      });

形态学操作

Uint8List _byte = await Cv2.morphologyEx(
        pathFrom: CVPathFrom.URL,
        pathString:
          'https://mir-s3-cdn-cf.behance.net/project_modules/fs/c7da51114930481.6044f05fcc76a.jpeg',
        operation: Cv2.MORPH_TOPHAT,
        kernelSize: [5, 5],
      );

      setState(() {
        _byte;
      });

PyrMeanShiftFiltering

Uint8List _byte = await Cv2.pyrMeanShiftFiltering(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        spatialWindowRadius: 20,
        colorWindowRadius: 20,
      );

      setState(() {
        _byte;
      });

Scharr

Uint8List _byte = await Cv2.scharr(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        depth: Cv2.CV_SCHARR,
        dx: 0,
        dy: 1,
      );

      setState(() {
        _byte;
      });

模块：其他图像变换

阈值处理

Uint8List _byte = await Cv2.threshold(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        thresholdValue: 150,
        maxThresholdValue: 200,
        thresholdType: Cv2.THRESH_BINARY,
      );

      setState(() {
        _byte;
      });

自适应阈值

Uint8List _byte = await Cv2.adaptiveThreshold(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        maxValue: 125,
        adaptiveMethod: Cv2.ADAPTIVE_THRESH_MEAN_C,
        thresholdType: Cv2.THRESH_BINARY,
        blockSize: 11,
        constantValue: 12,
      );

      setState(() {
        _byte;
      });

模块：颜色空间转换

cvtColor

Uint8List _byte = await Cv2.cvtColor(
        pathFrom: CVPathFrom.ASSETS,
        pathString: 'assets/Test.JPG',
        outputType: Cv2.COLOR_BGR2GRAY,
      );

      setState(() {
        _byte;
      });

模块：颜色映射

applyColorMap

Uint8List _byte = await Cv2.applyColorMap(
        pathFrom: CVPathFrom.URL,
        pathString:
          'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/16fe9f114930481.6044f05fca574.jpeg?raw=true',
        colorMap: Cv2.COLORMAP_JET,
      );

      setState(() {
        _byte;
      });

更多关于Flutter图像处理插件opencv_3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼•3 天前

更多关于Flutter图像处理插件opencv_3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中使用OpenCV进行图像处理是一个相对高级的任务，通常需要结合原生平台（如iOS和Android）的插件来实现。opencv_3这个包名可能不是最新的或者标准的OpenCV Flutter插件名称，但这里我将展示如何使用opencv相关的Flutter插件来进行图像处理。

目前，Flutter社区中有一个流行的OpenCV插件是opencv_flutter。以下是如何在Flutter项目中使用这个插件进行基本图像处理的示例。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加opencv_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  opencv_flutter: ^0.0.1  # 请注意，版本号可能需要更新，请查阅pub.dev获取最新版本

然后运行flutter pub get来安装依赖。

步骤 2: 配置原生平台

由于OpenCV是基于C++的库，Flutter插件需要通过MethodChannel与原生平台进行通信。通常，插件文档会提供详细的配置步骤。这里假设opencv_flutter插件已经为你处理了大部分配置工作。

步骤 3: 使用OpenCV进行图像处理

以下是一个简单的Flutter应用示例，它使用opencv_flutter插件来加载图像并将其转换为灰度图像。

import 'package:flutter/material.dart';
import 'package:opencv_flutter/opencv_flutter.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OpenCV Flutter Example'),
        ),
        body: Center(
          child: OpenCVExample(),
        ),
      ),
    );
  }
}

class OpenCVExample extends StatefulWidget {
  @override
  _OpenCVExampleState createState() => _OpenCVExampleState();
}

class _OpenCVExampleState extends State<OpenCVExample> {
  Uint8List? imageBytes;
  late cv.Mat imageMat;
  late cv.Mat grayImageMat;

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

  Future<void> loadImage() async {
    // 这里加载一张本地图片，你可以使用任何图片加载方法
    ByteData data = await rootBundle.load('assets/sample.jpg');
    Uint8List bytes = data.buffer.asUint8List();
    imageBytes = bytes;

    // 将图片数据转换为cv.Mat对象
    imageMat = cv.imdecode(cv.IMREAD_COLOR, bytes);

    // 转换为灰度图像
    cv.cvtColor(imageMat, grayImageMat, cv.COLOR_BGR2GRAY);

    // 将灰度图像转换回Uint8List以便在Flutter中显示
    Uint8List grayImageBytes = cv.imencode('.jpg', grayImageMat)[0];
    setState(() {
      imageBytes = grayImageBytes;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        if (imageBytes != null)
          Image.memory(
            imageBytes!,
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        ElevatedButton(
          onPressed: loadImage,
          child: Text('Load and Convert to Grayscale'),
        ),
      ],
    );
  }
}

注意事项

图片资源：确保在pubspec.yaml中声明了图片资源，例如：
```
flutter:
  assets:
    - assets/sample.jpg
```
插件版本：由于Flutter和插件生态的快速发展，确保你使用的是最新版本的opencv_flutter插件，并查阅其官方文档以获取最新的使用指南。
权限问题：如果你的应用需要从设备摄像头或存储中读取图像，确保在Android和iOS平台上配置了相应的权限。

这个示例展示了如何使用opencv_flutter插件在Flutter应用中加载和处理图像。根据具体需求，你可以进一步扩展这个示例来实现更复杂的图像处理功能。

Flutter图像处理插件opencv_3的使用