Flutter图片编辑插件image_editor的使用

简介

image_editor 是一个用于处理图像数据的Flutter插件，支持对图片进行翻转、裁剪、旋转、缩放、颜色矩阵调整、添加文字、混合图片等操作。它基于原生代码（如Objective-C、Kotlin）编写，可以方便地处理图片并用于保存/上传/预览。

支持平台

• Android
• iOS
• OpenHarmony (示例请参见 image_editor_ohos/example)

安装与配置

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  image_editor: $latest

然后在 Dart 文件中导入：

import 'package:image_editor/image_editor.dart';

使用方法

基本用法

以下是一个简单的示例，展示如何加载图片并进行基本编辑：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_editor/image_editor.dart';
import 'package:flutter/services.dart';

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

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

class ImageEditorDemo extends StatefulWidget {
  @override
  _ImageEditorDemoState createState() => _ImageEditorDemoState();
}

class _ImageEditorDemoState extends State<ImageEditorDemo> {
  Uint8List? editedImage;

  Future<void> editImage() async {
    final Uint8List originalImage = await loadFromAsset('assets/sample.jpg');
    
    final ImageEditorOption option = ImageEditorOption()
      ..addOption(RotateOption(degree: 90))
      ..addOption(ClipOption(x: 100, y: 100, width: 300, height: 300))
      ..outputFormat = OutputFormat.jpeg(95);

    try {
      final result = await ImageEditor.editImage(image: originalImage, imageEditorOption: option);
      setState(() {
        editedImage = result;
      });
    } catch (e) {
      print(e.toString());
    }
  }

  Future<Uint8List> loadFromAsset(String key) async {
    final ByteData byteData = await rootBundle.load(key);
    return byteData.buffer.asUint8List();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Editor Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => editImage(),
              child: Text('Edit Image'),
            ),
            if (editedImage != null)
              Image.memory(editedImage!),
          ],
        ),
      ),
    );
  }
}

高级用法

翻转图片

final editorOption = ImageEditorOption();
editorOption.addOption(FlipOption(horizontal: true, vertical: false));

添加文字

final textOption = AddTextOption();
textOption.addText(
  EditorText(
    offset: Offset(0, 0),
    text: "Hello World",
    fontSizePx: 40,
    color: Colors.red,
    fontName: '', // 默认字体
  ),
);

混合图片

void mixImages() async {
  final src = await loadFromAsset('assets/src.png');
  final dst = await loadFromAsset('assets/dst.png');
  final optionGroup = ImageEditorOption();
  optionGroup.outputFormat = OutputFormat.png();
  optionGroup.addOption(
    MixImageOption(
      x: 300,
      y: 300,
      width: 150,
      height: 150,
      target: MemoryImageSource(src),
      blendMode: BlendMode.srcOver,
    ),
  );
  final result = await ImageEditor.editImage(image: dst, imageEditorOption: optionGroup);
  // 处理结果...
}

合并多张图片

Future<void> mergeImages() async {
  final slideLength = 180.0;
  final count = 3;
  final option = ImageMergeOption(
    canvasSize: Size(slideLength * count, slideLength * count),
    format: OutputFormat.png(),
  );

  final memory = await loadFromAsset('assets/icon.png');
  for (var i = 0; i < count; i++) {
    option.addImage(
      MergeImageConfig(
        image: MemoryImageSource(memory),
        position: ImagePosition(
          Offset(slideLength * i, slideLength * i),
          Size.square(slideLength),
        ),
      ),
    );
  }

  final result = await ImageMerger.mergeToMemory(option: option);
  // 处理合并后的图片...
}

更多功能

• 绘制图形：支持绘制线条、矩形、椭圆、点、路径等。
• 颜色矩阵：提供亮度、饱和度和对比度的调整。
• 自定义字体：通过 FontManager 注册并使用自定义字体。

更多详细信息和示例代码，请参考 官方GitHub仓库。

许可证

Apache License 2.0

希望这个指南对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。