Flutter边缘自动检测插件edge_auto_detection的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter边缘自动检测插件edge_auto_detection的使用

一个用于检测物体边缘、扫描纸张、检测角点和矩形的Flutter插件。它允许裁剪检测到的对象图像,并返回裁剪图像的路径。

iOS

iOS 13.0或更高版本才可使用该插件。如果编译版本低于13.0,请确保在使用插件之前检查iOS版本。将ios/Podfile文件中的最低平台版本改为13(或更高),并根据permission_handler请求访问权限。

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',

        ## dart: PermissionGroup.camera
         'PERMISSION_CAMERA=1',

        ## dart: PermissionGroup.photos
         'PERMISSION_PHOTOS=1',
      ]
    end
    # End of the permission_handler configuration
  end
end

Fix build on xCode 15

在你的项目Podfile中添加以下行:

pod 'WeScan', :path => '.symlinks/plugins/edge_auto_detection/ios/WeScan-3.0.0'

例如:

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  pod 'WeScan', :path => '.symlinks/plugins/edge_auto_detection/ios/WeScan-3.0.0'
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

ios/Runner/Info.plist中添加以下权限:

  • 一个键为Privacy - Camera Usage Description,并附上使用描述。

或者以文本格式添加以下键:

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Can I use the photos please?</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Can I use the photos please?</string>

通过XCode添加本地化到你的应用中,以便本地化WeScan的动作按钮。

Android

插件代码是用Kotlin 1.8.0编写的,因此你的Android项目的Kotlin版本也应设置为1.8.0。

android/build.gradle文件中更改Kotlin版本:

ext.kotlin_version = '1.8.0'

android/app/build.gradle文件中将最小Android SDK版本改为21(或更高):

minSdkVersion 21

添加依赖

请在安装前检查最新版本。

dependencies:
  flutter:
    sdk: flutter
  edge_auto_detection: ^1.1.3
  permission_handler: ^10.0.0
  path_provider: ^2.0.11
  path: ^1.8.2

在Dart代码中添加以下导入

import 'package:edge_auto_detection/edge_auto_detection.dart';

示例代码

以下是使用该插件的示例代码:

import 'dart:async';
import 'dart:io';
import 'package:edge_auto_detection/edge_auto_detection.dart';
import 'package:flutter/material.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _imagePath;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  Future<void> getImageFromCamera() async {
    bool isCameraGranted = await Permission.camera.request().isGranted;
    if (!isCameraGranted) {
      isCameraGranted = await Permission.camera.request() == PermissionStatus.granted;
    }

    if (!isCameraGranted) {
      // 没有相机权限
      return;
    }

    // 生成保存路径
    String imagePath = join((await getApplicationSupportDirectory()).path,
        "${(DateTime.now().millisecondsSinceEpoch / 1000).round()}.jpeg");

    bool success = false;

    try {
      // 确保调用detectEdge时等待完成
      success = await EdgeDetection.detectEdge(
        imagePath,
        canUseGallery: false,
        androidScanTitle: 'Scanning', // 使用自定义本地化
        androidCropTitle: 'Crop',
        androidCropBlackWhiteTitle: 'Black White',
        androidCropReset: 'Reset',
      );
      print("success: $success");
    } catch (e) {
      print(e);
    }

    // 如果在异步平台消息飞行时小部件从树中移除,则我们希望丢弃回复而不是调用setState来更新我们的非存在外观。
    if (!mounted) return;

    setState(() {
      if (success) {
        _imagePath = imagePath;
      }
    });
  }

  Future<void> getImageFromGallery() async {
    // 生成保存路径
    String imagePath = join((await getApplicationSupportDirectory()).path,
        "${(DateTime.now().millisecondsSinceEpoch / 1000).round()}.jpeg");

    bool success = false;
    try {
      // 确保调用detectEdgeFromGallery时等待完成
      success = await EdgeDetection.detectEdgeFromGallery(
        imagePath,
        androidCropTitle: 'Crop', // 使用自定义本地化
        androidCropBlackWhiteTitle: 'Black White',
        androidCropReset: 'Reset',
      );
      print("success: $success");
    } catch (e) {
      print(e);
    }

    // 如果在异步平台消息飞行时小部件从树中移除,则我们希望丢弃回复而不是调用setState来更新我们的非存在外观。
    if (!mounted) return;

    setState(() {
      if (success) {
        _imagePath = imagePath;
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Center(
                child: ElevatedButton(
                  onPressed: getImageFromCamera,
                  child: Text('扫描'),
                ),
              ),
              SizedBox(height: 20),
              Text('裁剪图像路径:'),
              Padding(
                padding: const EdgeInsets.only(top: 0, left: 0, right: 0),
                child: Text(
                  _imagePath?.toString() ?? '',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 14),
                ),
              ),
              Visibility(
                visible: _imagePath != null,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Image.file(
                    File(_imagePath ?? ''),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter边缘自动检测插件edge_auto_detection的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter边缘自动检测插件edge_auto_detection的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用edge_auto_detection插件来进行边缘自动检测的示例代码。请注意,edge_auto_detection插件的具体实现和API可能会随着版本更新而变化,因此以下代码可能需要根据实际插件版本进行调整。

首先,确保你已经在pubspec.yaml文件中添加了edge_auto_detection依赖:

dependencies:
  flutter:
    sdk: flutter
  edge_auto_detection: ^最新版本号  # 替换为实际最新版本号

然后,运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter项目中实现边缘检测功能。以下是一个简单的示例,展示如何使用edge_auto_detection插件来处理图像并检测边缘。

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

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

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

class EdgeDetectionPage extends StatefulWidget {
  @override
  _EdgeDetectionPageState createState() => _EdgeDetectionPageState();
}

class _EdgeDetectionPageState extends State<EdgeDetectionPage> {
  Uint8List? _imageBytes;
  Uint8List? _edgeImageBytes;

  Future<void> _pickImage() async {
    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      final File imageFile = File(pickedFile.path);
      setState(() {
        _imageBytes = imageFile.readAsBytesSync();
      });
      _processImage();
    }
  }

  Future<void> _processImage() async {
    if (_imageBytes == null) return;

    final EdgeDetection edgeDetection = EdgeDetection();
    final Uint8List edgeImageBytes = await edgeDetection.detectEdges(_imageBytes!);
    setState(() {
      _edgeImageBytes = edgeImageBytes;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _pickImage,
          child: Text('Pick Image'),
        ),
        SizedBox(height: 20),
        if (_imageBytes != null)
          Image.memory(_imageBytes!),
        SizedBox(height: 20),
        if (_edgeImageBytes != null)
          Image.memory(_edgeImageBytes!),
      ],
    );
  }
}

在这个示例中,我们使用了image_picker插件来选择图像,这同样需要在pubspec.yaml中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  edge_auto_detection: ^最新版本号  # 替换为实际最新版本号
  image_picker: ^最新版本号  # 替换为实际最新版本号

并确保在AndroidManifest.xmlInfo.plist中添加了必要的权限配置,以便从相册中选择图像。

这个示例展示了如何从相册中选择一张图像,然后使用edge_auto_detection插件进行边缘检测,并将原始图像和边缘检测后的图像显示在屏幕上。请注意,由于edge_auto_detection插件的具体实现可能有所不同,上述代码可能需要根据实际插件的API进行调整。

另外,由于edge_auto_detection插件可能不是一个广为人知的插件,如果在实际项目中找不到这个插件或者插件的API与上述示例不符,建议查阅插件的官方文档或源代码以获取最准确的信息。如果插件不存在或无法满足需求,可能需要考虑使用其他图像处理库或自己实现边缘检测算法。

回到顶部