Flutter背景移除插件remove_background的使用

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

Flutter背景移除插件remove_background的使用

特性

  • 手动移除背景

使用示例

在 example 文件夹中包含了一个示例代码。

await cutImage(context: context, image: image!);

示例代码

import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:remove_background/remove_background.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Remove Background Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Remove Background Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoaded = false;
  ui.Image? image;
  ByteData? pngBytes;

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

  getUiImage() async {
    ByteData data = await rootBundle.load('images/test_image.jpg');
    image = await decodeImageFromList(data.buffer.asUint8List());
    await getPNG();
    setState(() {
      isLoaded = true;
    });
  }

  getPNG() async {
    pngBytes = await image?.toByteData(format: ui.ImageByteFormat.png);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            isLoaded
                ? Image.memory(Uint8List.view(pngBytes!.buffer))
                : const Icon(Icons.image),
            const Text(
              'Example remove background background image',
            ),
            isLoaded
                ? TextButton(
                    onPressed: () async {
                      pngBytes =
                          await cutImage(context: context, image: image!);
                      setState(() {});
                    },
                    child: const Text("Cutout Image"))
                : const SizedBox()
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用remove_background插件来移除图像背景的示例代码。这个插件通常用于处理图像，以分离前景和背景，特别是在人像照片中非常有用。

首先，确保你的Flutter项目已经设置好了，并且你已经添加了remove_background插件到你的pubspec.yaml文件中：

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

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

接下来，你可以在你的Dart文件中使用remove_background插件。以下是一个简单的示例，展示了如何从图像中移除背景：

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:remove_background/remove_background.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 pickedFile = await _picker.pickImage(source: ImageSource.gallery);

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

      _removeBackground();
    }
  }

  Future<void> _removeBackground() async {
    if (_imageFile != null) {
      final result = await RemoveBackground().removeBackgroundFromPath(
        _imageFile!.path,
        modelType: ModelType.selfiePortraitModel, // 或者使用其他模型，比如 fullBodyModel
      );

      if (result.success) {
        setState(() {
          _resultImageFile = File(result.resultPath!);
        });
      } else {
        // 处理错误
        print('Error removing background: ${result.error}');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Background Remover'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile != null
                ? Image.file(_imageFile!)
                : Container(),
            SizedBox(height: 20),
            _resultImageFile != null
                ? Image.file(_resultImageFile!)
                : Container(),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 使用image_picker插件来选择一张图片。
  2. 将选中的图片传递给remove_background插件的removeBackgroundFromPath方法。
  3. 如果背景移除成功，将结果显示在屏幕上。

请注意，remove_background插件可能依赖于某些本地资源或预训练模型，因此在实际部署时，确保遵循插件的文档进行配置。

此外，根据remove_background插件的更新情况，某些API或方法可能会发生变化，因此请参考插件的官方文档以获取最新和最准确的信息。

回到顶部