Flutter图片编辑插件bc_image_editor的使用

Flutter 图片编辑插件 bc_image_editor 的使用

BC Image Editor

您可以使用此包编辑图像,并通过将前景设置为 null 创建灵活预览图像。目前,您只能使用资源文件。

特性

  • 背景和可选的前景图像
  • 缩放图像
  • 设置它们的 x, y 位置
  • 在 x, y 轴上 3D 旋转前景图像(仅限前景)
  • 2D 旋转前景图像
  • 用于详细视图的缩放
  • 使用设备文件或资源文件
  • 使用手势检测器编辑前景图像。
    • 大小和位置
    • 水平和垂直 3D 旋转
    • 2D 旋转
    • 查看模式(缩放)

开始使用

导入

import 'package:bc_image_editor/bc_image_editor.dart';

使用

BcImageEditor(
    frontImage: "image/path",
    bgImage: "image/path",
    frontWidth: 200,
    frontHeight: 300,
    bgWidth: 300,
    bgHeight: 200, // 如果未设置宽度和高度之一或设置为 null,则另一个会自动缩放
    frontLeft: 10,
    frontTop: 10,
    bgLeft: 10,
    bgTop: 10,
    frontBoxFit: BoxFit.fill,
    bgBoxFit: BoxFit.fill,
    rotateX: 0, // rotateX 和 rotateY 都在 3D 轴上
    rotateY: 0,
    rotate2D: 0,
)

使用手势检测器编辑图像

导入

import 'package:bc_image_editor/edit_with_gesture.dart';

使用

EditWithGesture(
  frontImage: frontFilePath,
  bgImage: bgFilePath,
  editMode: EditMode.verticalRotate,
);

手势编辑模式

编辑模式 功能
size 调整大小和改变图像位置。
horizontalRotate 沿水平轴 3D 旋转图像。
verticalRotate 沿垂直轴 3D 旋转图像。
rotate2D 2D 旋转。
viewMode 放大图像以查看细节(不进行任何编辑)。
noEdit 关闭编辑。

使用资源文件夹中的图像

初始化路径名

String imagePath = "";

创建异步函数并在 initState 中使用它

void initFiles() async {
    File tempImg =
        await getImageFileFromAssets("assets/image/path");
    setState(() {
        imagePath = tempImg.path;
    });
}

示例

例如,您想使用手势检测器编辑图像并从资源文件中使用图像。

导入文件

import 'package:bc_image_editor/bc_image_editor.dart';
import 'package:bc_image_editor/edit_with_gesture.dart';

创建文件路径变量

String frontFilePath = "", bgFilePath = "";

获取图像文件

创建一个异步函数来获取图像文件。并使用 getImageFileFromAssets 函数从资源中获取图像。(如果您想直接使用设备上的图像,可以写入路径。)

void initFiles() async {
    File frontTempFile =
        await getImageFileFromAssets("assets/images/example-front.png");
    File tempFileBg = await getImageFileFromAssets("assets/images/example-bg.jpg");
    setState(() {
        frontFilePath = frontTempFile.path;
        bgFilePath = tempFileBg.path;
    });
}

initState 中使用此函数

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

使用 EditWithGesture 小部件

EditWithGesture(
    frontImage: frontFilePath,
    bgImage: bgFilePath,
    editMode: EditMode.verticalRotate,
);

手势检测器编辑示例

EditMode.size

EditMode.horizontalRotate

EditMode.verticalRotate

EditMode.rotate2D

EditMode.viewMode

完整代码

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:bc_image_editor/bc_image_editor.dart';
import 'package:bc_image_editor/edit_with_gesture.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: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text("测试"),
        ),
        body: const Home(),
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String frontFilePath = "", bgFilePath = "";

  void initFiles() async {
    File frontTempFile =
        await getImageFileFromAssets("assets/images/char-2.png");
    File tempFileBg = await getImageFileFromAssets("assets/images/bg-2.jpg");
    setState(() {
      frontFilePath = frontTempFile.path;
      bgFilePath = tempFileBg.path;
    });
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EditWithGesture(
      frontImage: frontFilePath,
      bgImage: bgFilePath,
      editMode: EditMode.verticalRotate,
    );
  }
}

更多关于Flutter图片编辑插件bc_image_editor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然,下面是一个关于如何使用Flutter图片编辑插件bc_image_editor的代码示例。这个示例将展示如何集成该插件并进行基本的图片编辑操作,比如裁剪和滤镜应用。

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

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

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

接下来,在你的Flutter项目中创建一个页面来进行图片编辑。以下是一个简单的示例代码:

import 'package:flutter/material.dart';
import 'package:bc_image_editor/bc_image_editor.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart'; // 用于选择图片

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

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

class ImageEditorPage extends StatefulWidget {
  @override
  _ImageEditorPageState createState() => _ImageEditorPageState();
}

class _ImageEditorPageState extends State<ImageEditorPage> {
  File? _imageFile;

  final ImagePicker _picker = ImagePicker();

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Editor Demo'),
      ),
      body: Center(
        child: _imageFile == null
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('No image selected.'),
                  ElevatedButton(
                    onPressed: _pickImage,
                    child: Text('Pick Image'),
                  ),
                ],
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.file(_imageFile!),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () async {
                      final result = await BcImageEditor.editImage(
                        context: context,
                        image: _imageFile!,
                        editorConfig: BcImageEditorConfig(
                          cropConfig: BcCropConfig(
                            aspectRatioPresets: [
                              CropAspectRatioPreset.square,
                              CropAspectRatioPreset.ratio3x2,
                              CropAspectRatioPreset.original,
                              CropAspectRatioPreset.ratio4x3,
                              CropAspectRatioPreset.ratio16x9
                            ],
                          ),
                          filterConfig: BcFilterConfig(
                            presets: [
                              BcFilterPreset.none,
                              BcFilterPreset.blackWhite,
                              BcFilterPreset.sepia,
                              BcFilterPreset.negative,
                            ],
                          ),
                        ),
                      );

                      if (result != null) {
                        setState(() {
                          _imageFile = File(result.path);
                        });
                      }
                    },
                    child: Text('Edit Image'),
                  ),
                ],
              ),
      ),
    );
  }
}

解释

  1. 依赖导入:首先,我们导入了bc_image_editorimage_picker包。image_picker用于从设备图库中选择图片。

  2. UI结构:我们创建了一个简单的UI,包含一个按钮用于选择图片,以及一个条件渲染区域来显示选中的图片和编辑按钮。

  3. 选择图片:点击“Pick Image”按钮时,使用ImagePicker从设备图库中选择一张图片,并将其保存到_imageFile变量中。

  4. 编辑图片:点击“Edit Image”按钮时,调用BcImageEditor.editImage方法打开图片编辑器。你可以通过BcImageEditorConfig配置裁剪和滤镜选项。编辑完成后,结果图片的路径将返回,并更新到_imageFile变量中。

这个示例展示了如何使用bc_image_editor进行基本的图片编辑操作。你可以根据需要进一步自定义和扩展这些功能。

回到顶部