Flutter背景移除插件background_remover的使用

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

Flutter背景移除插件background_remover的使用

Overview

background_remover 是第一个专为Flutter应用程序设计的背景移除插件。该插件提供了一种简单的方法来从图库中选择图片并处理它们以移除背景。

Before After
before after

Features

  • 从图库中选择图片
  • 移除图片背景
  • 显示带有和不带背景的图片

Getting Started

Installation

pubspec.yaml 文件中添加 background_remover

dependencies:
  flutter:
    sdk: flutter
  background_remover: ^1.0.0

Import the Package

在Dart文件中导入所需的包:

import 'package:background_remover/background_remover.dart';

Usage

以下是一个基本示例,展示如何在Flutter应用程序中使用 background_remover 插件:

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:background_remover/background_remover.dart';
import 'package:image_picker/image_picker.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Background remover'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Uint8List? image;
  bool isLoading = false;

  Future<void> _pickImage() async {
    setState(() {
      image = null;
    });
    final ImagePicker picker = ImagePicker();
    final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      setState(() {
        isLoading = true;
      });
      final Uint8List imageBytes = await pickedFile.readAsBytes();
      image = await removeBackground(imageBytes: imageBytes);
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (image != null) Image.memory(image!),
            if (isLoading) const LinearProgressIndicator()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        child: const Icon(Icons.image),
      ),
    );
  }
}

Contributing

欢迎对 background_remover 插件进行贡献。请自由地fork仓库,进行修改,并创建pull request以升级它。

License

此插件受 MIT License 许可。


此README提供了 background_remover 插件的基本介绍。假设读者对Flutter和Dart有基本的了解。


更多关于Flutter背景移除插件background_remover的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter背景移除插件background_remover的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用background_remover插件来移除图像背景的示例代码。这个插件利用了机器学习模型来检测和移除图像中的背景。

1. 添加依赖

首先,你需要在你的pubspec.yaml文件中添加background_remover依赖:

dependencies:
  flutter:
    sdk: flutter
  background_remover: ^latest_version  # 请替换为实际的最新版本号

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

2. 配置权限

如果你的应用需要访问设备的存储以选择图片,你需要在AndroidManifest.xml(针对Android)和Info.plist(针对iOS)中添加相应的权限。

Android (AndroidManifest.xml)

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS (Info.plist)

添加以下权限描述:

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择图片</string>
<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄图片</string>

3. 使用插件

以下是一个简单的Flutter应用示例,演示如何使用background_remover插件:

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:background_remover/background_remover.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BackgroundRemoverScreen(),
    );
  }
}

class BackgroundRemoverScreen extends StatefulWidget {
  @override
  _BackgroundRemoverScreenState createState() => _BackgroundRemoverScreenState();
}

class _BackgroundRemoverScreenState extends State<BackgroundRemoverScreen> {
  File? _imageFile;
  File? _resultImageFile;

  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

    if (image != null && image.path != null) {
      setState(() {
        _imageFile = File(image.path!);
      });

      _removeBackground();
    }
  }

  Future<void> _removeBackground() async {
    if (_imageFile == null) return;

    try {
      final result = await BackgroundRemover.removeBackground(
        imagePath: _imageFile!.path,
        modelType: ModelType.deepai, // 或者使用其他可用的模型类型,如 ModelType.selfie_segmentation
      );

      setState(() {
        _resultImageFile = File(result.outputPath);
      });
    } catch (e) {
      print("Error removing background: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('背景移除示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile == null
                ? Text('没有选择图片')
                : Image.file(_imageFile!),
            _resultImageFile == null
                ? Text('')
                : Image.file(_resultImageFile!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('选择图片'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 注意事项

  • 确保你已经在pubspec.yaml中添加了image_picker依赖,因为示例代码使用了它来选择图片。
  • ModelType有多种选项,你可以根据需求选择适合的模型类型。
  • 插件可能需要在Android和iOS上进行一些额外的配置,以确保其正常工作,特别是在处理图像权限和模型文件方面。

这个示例展示了如何使用background_remover插件来加载图像、移除背景并显示结果。根据你的具体需求,你可以进一步定制和扩展这个示例。

回到顶部