Flutter图像处理插件flutter_image_processing的使用

1. Introduction

flutter_image_processing 插件项目为 iOS 和 Android 提供了基于 OpenCV 4.3.0 库的图像处理功能。这些功能通过将 OpenCV 教程中提供的 C++ 图像处理代码适配到 Flutter 中实现。项目使用 FFI（Foreign Function Interface）库将这些 C++ 函数绑定到 Flutter 中。

目前，我们提供了两个函数：高斯模糊（Gaussian Blur）和 Canny 边缘检测器（Canny Edge Detector）。未来，我们将继续更新和扩展功能，提供更多图像处理能力。

在示例代码中，你将注意到 image_picker 的使用。此外，请注意，示例在模拟器上运行时无法进行测试，建议在实际设备上进行测试。

2. Screenshots

Home	Select Image	Gaussian Blur Result	Canny Edge Detector Result

3. Setup

flutter_image_processing 插件需要 image_picker 来选择图片。image_picker 的权限设置可以在其各自的插件安装文档中找到，适用于 iOS 和 Android。

4. Usage

以下是一个完整的示例代码，展示了如何使用 flutter_image_processing 插件进行高斯模糊和 Canny 边缘检测。

示例代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_image_processing/flutter_image_processing.dart' as flutter_image_processing;
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(MaterialApp(
    home: const MyApp(),
  ));
}

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

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

class _MyAppState extends State<MyApp> {
  final ImagePicker _picker = ImagePicker();
  late String version;
  Image _img = Image.asset('assets/img/default.jpg');

  @override
  void initState() {
    super.initState();
    version = flutter_image_processing.opencvVersion();
  }

  @override
  Widget build(BuildContext context) {
    const textStyle = TextStyle(fontSize: 25);
    const spacerSmall = SizedBox(height: 10);
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_image_processing example'),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              spacerSmall,
              Text(
                'OpenCV Version: $version',
                style: textStyle,
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  final imageFile = await _picker.pickImage(source: ImageSource.gallery);
                  final imagePath = imageFile?.path ?? "none";

                  await flutter_image_processing.gaussianBlur(imagePath);

                  setState(() {
                    _img = Image.file(File(imagePath));
                  });
                },
                child: const Text("Run GaussianBlur"),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  final imageFile = await _picker.pickImage(source: ImageSource.gallery);
                  final imagePath = imageFile?.path ?? "none";

                  await flutter_image_processing.cannyDetector(imagePath);

                  setState(() {
                    _img = Image.file(File(imagePath));
                  });
                },
                child: const Text("Run CannyDetector"),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  final imageFile = await _picker.pickImage(source: ImageSource.gallery);
                  final imagePath = imageFile?.path ?? "none";

                  await flutter_image_processing.medianBlur(imagePath);

                  setState(() {
                    _img = Image.file(File(imagePath));
                  });
                },
                child: const Text("Run medianBlur"),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  final imageFile = await _picker.pickImage(source: ImageSource.gallery);
                  final imagePath = imageFile?.path ?? "none";

                  await flutter_image_processing.bilateralFilter(imagePath);

                  setState(() {
                    _img = Image.file(File(imagePath));
                  });
                },
                child: const Text("Run bilateralFilter"),
              ),
              SizedBox(height: 20),
              Center(child: _img),
            ],
          ),
        ),
      ),
    );
  }

  void test() {
    List<String> a;
  }
}

参考

• OpenCV Image Processing Tutorial: https://docs.opencv.org/4.3.0/d7/da8/tutorial_table_of_content_imgproc.html
• image picker: https://pub.dev/packages/image_picker

希望这个示例对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。