Flutter图片编辑插件imgly_editor的使用

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

Flutter图片编辑插件imgly_editor的使用

插件介绍

imgly_editor 插件包含了 iOS 和 Android 的预构建的编辑器，这些编辑器是 Creative Engine 的 UI，通过 Flutter 让用户可以访问。Creative Engine 允许您构建任何设计编辑 UI、自动化和创意工作流程。它提供了高性能且强大的图形处理能力，结合了布局、排版和图像处理的最佳实践，并围绕模板化和适应性为中心的高级工作流程。

许可证

CreativeEditor SDK 是一个商业产品。要使用它并获取访问权限，您需要使用许可证文件解锁 SDK。您可以在 https://img.ly/pricing 购买许可证。

开始使用

要开始使用 Flutter 版本的 IMG.LY Editor，请参考我们的文档：https://img.ly/docs/cesdk/mobile-editor/quickstart?platform=flutter。在那里您可以学习如何集成和配置它们以满足您的特定需求。

集成示例代码

import 'package:imgly_editor/imgly_editor.dart';

// 配置编辑器。
final settings = EditorSettings(license: "YOUR_LICENSE");

// 打开编辑器并获取结果。
final result = await IMGLYEditor.openEditor(settings: settings);

示例代码

import 'package:flutter/material.dart';
import 'package:imgly_editor/imgg_editor.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: ElevatedButton(
              onPressed: () async {
                final settings = EditorSettings(license: "YOUR_LICENSE");
                final _ = IMGLYEditor.openEditor(settings: settings);
              },
              child: const Text("Open Editor")),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用imgly_editor插件进行图片编辑的代码示例。imgly_editor是一个强大的图片编辑库，它提供了丰富的图片编辑功能，如滤镜、裁剪、旋转等。

首先，确保你已经在pubspec.yaml文件中添加了imgly_editor依赖：

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

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用imgly_editor进行图片编辑：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:imgly_editor/imgly_editor.dart';
import 'package:image_picker/image_picker.dart';

注意：imgly_editor依赖于image_picker来获取图片，所以你也需要添加image_picker依赖。

  1. 创建一个图片编辑页面：
class ImageEditPage extends StatefulWidget {
  @override
  _ImageEditPageState createState() => _ImageEditPageState();
}

class _ImageEditPageState extends State<ImageEditPage> {
  File? _imageFile;
  final ImagePicker _picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Editor'),
      ),
      body: Center(
        child: _imageFile == null
            ? ElevatedButton(
                onPressed: _pickImage,
                child: Text('Pick Image'),
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.file(_imageFile!),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () async {
                      final EditorController editorController = EditorController(
                        image: _imageFile!,
                      );

                      final result = await showDialog(
                        context: context,
                        builder: (context) => ImglyEditor(
                          controller: editorController,
                        ),
                      );

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

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

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }
}
  1. 运行你的应用：

确保你的主页面导航到ImageEditPage，例如：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageEditPage(),
    );
  }
}

这个示例代码展示了如何使用imgly_editor进行图片编辑。用户首先选择一张图片，然后点击“Edit Image”按钮进入编辑界面。编辑完成后，更新显示的图片。

请注意，imgly_editor的API和功能可能会随着版本的更新而变化，因此请参考其官方文档以获取最新的使用指南和API参考。

回到顶部