Flutter图片编辑插件fhoto_editor的使用

Flutter图片编辑插件fhoto_editor的使用

FhotoEditor

license

FhotoEditor 插件提供了简单的图像编辑功能，包括滤镜、裁剪和变换。该插件支持所有 iOS 和 Android 平台，但裁剪功能仅在 iOS 和 Android 上可用。

要开始使用此插件，我们需要在应用模块的 build.gradle 文件中添加依赖项。

安装

首先，在 pubspec.yaml 文件中添加 image_editor_plus 作为依赖项：

dependencies:
  image_editor_plus: ^版本号

然后导入插件：

import 'package:fhoto_editor/fhoto_editor.dart';

运行以下命令以安装包：

flutter pub get

iOS

在 Info.plist 文件中添加以下键值对，以描述应用为什么需要访问照片库：

<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

关键特性

  • 单个滤镜应用于图像
  • 多个滤镜应用于图像
  • 图像保存到本地
  • 裁剪图像
  • 调整色调
  • 调整亮度
  • 调整饱和度
  • 调整曝光
  • 添加阴影
  • 增加高光
  • 应用暗角效果
  • 应用褪色效果
  • 应用活力效果
  • 调整温度
  • 调整对比度
  • 旋转图像
  • 翻转图像

演示

演示

使用

单个滤镜应用于图像

创建一个用于颜色生成器类的实例：

final colorGen = ColorFilterGenerator.getInstance();

在 ColorFiltered 小部件中使用它作为矩阵：

ColorFiltered(
  colorFilter: ColorFilter.matrix(myFilter.matrix),
  child: Image.asset('assets/shahid.jpeg')
)

多个滤镜应用于图像

创建一个用于颜色生成器类的实例：

final colorGen = ColorFilterGenerator.getInstance();

定义多个滤镜：

ColorMultiFilterGenerator myFilter = ColorMultiFilterGenerator(filters: [
  colorGen.getHueMatrix(value: _hueSeekbarValue),
  colorGen.getContrastMatrix(value: _contrastSeekbarValue),
  colorGen.getBrightnessMatrix(value: _brightnessSeekbarValue),
  colorGen.getSaturationMatrix(value: _saturationSeekbarValue),
  colorGen.getExposureMatrix(value: _exposureSeekbarValue),
  colorGen.getShadowMatrix(value: _shadowSeekbarValue),
  colorGen.getHighlightedMatrix(value: _highlightedSeekbarValue),
  colorGen.getFadedMatrix(value: _fadedSeekbarValue),
  colorGen.getVibrancyMatrix(value: _vibrancySeekbarValue),
  colorGen.getTemperatureMatrix(value: _temperatureSeekbarValue),
]);

将 myFilter 实例应用到 ColorFiltered 小部件：

ColorFiltered(
  colorFilter: ColorFilter.matrix(myFilter.matrix),
  child: Image.asset('assets/shahid.jpeg')
)

保存图像到本地

使用 RenderRepaintBoundary 小部件捕获屏幕上的特定区域，并将其转换为 ui.Image 对象：

RenderRepaintBoundary boundary = 
_key.currentContext!.findRenderObject() as RenderRepaintBoundary;
ui.Image image = await boundary.toImage();
return image;

保存图像到本地：

void saveImage(ui.Image image) async {
  // 创建一个 ByteData 缓冲区来存储图像数据。
  final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  final Uint8List pngBytes = byteData!.buffer.asUint8List();

  // 获取设备的默认文件存储目录。
  final directory = await getTemporaryDirectory();

  // 创建一个文件来写入图像数据。
  final File file = File('${directory.path}/filtered_image.png');

  // 将图像数据写入文件。
  await file.writeAsBytes(pngBytes);

  if (kDebugMode) {
    print("File Saved:${file.path}");
  }
}

裁剪图像

从相册中选择图像并进行采样，以便加载到内存中：

late File _file = File("path");
late File _sample = File("path");

Future<void> _openImage() async {
  final pickedFile = 
  await ImagePicker().getImage(source: ImageSource.gallery);
  final file = File(pickedFile?.path as String);

  /// sampleImage 用于降低较大图像的大小，然后再加载到内存中。
  /// preferredSize 用于处理正方形图像。
  /// context.size?.longestSide.ceil() 用于获取图像的实际高度和宽度。

  final sample = await ImageCrop.getInstance().sampleImage(file: file, preferredSize: context.size?.longestSide.ceil());

  setState(() {
    _sample = sample;
    _file = file;
  });
}

使用 cropImage 函数裁剪已加载到内存中的采样图像：

final cropKey = GlobalKey<CropViewState>();
late File _lastCropped = File("path");

Future<File?> _cropImage() async {
  final scale = cropKey.currentState?.scale;
  final area = cropKey.currentState?.area;
  if (area == null) {
    // 无法裁剪，小部件未设置
    return null;
  }

  /// 扩大比例以使用尽可能多的像素
  /// 这将提高采样图像的分辨率，以使裁剪后的图像更大
  final sample = await ImageCrop.getInstance().sampleImage(
    file: _file,
    preferredSize: (2000 / scale!).round(),
  );

  final file = await ImageCrop.getInstance().cropImage(
    file: sample,
    area: area,
  );

  sample.delete();

  _lastCropped.delete();
  _lastCropped = file;

  debugPrint('$file');
  return file;
}

显示裁剪后的图像：

Expanded(
  child: Image.file(File(croppedFile.path))
)

裁剪演示

调整色调

ColorFilter.matrix(colorGen.getHueMatrix(value: _seekbarValue)

调整亮度

ColorFilter.matrix(colorGen.getBrightnessMatrix(value: _seekbarValue)

调整饱和度

ColorFilter.matrix(colorGen.getSaturationMatrix(value: _seekbarValue)

调整曝光

ColorFilter.matrix(colorGen.getExposureMatrix(value: _seekbarValue)

添加阴影

ColorFilter.matrix(colorGen.getShadowMatrix(value: _seekbarValue)

增加高光

ColorFilter.matrix(colorGen.getHighlightedMatrix(value: _seekbarValue)

应用暗角效果

ColorFilter.matrix(colorGen.getVignetteMatrix(value: _seekbarValue)

应用褪色效果

ColorFilter.matrix(colorGen.getFadedMatrix(value: _seekbarValue)

应用活力效果

ColorFilter.matrix(colorGen.getVibrancyMatrix(value: _seekbarValue)

调整温度

ColorFilter.matrix(colorGen.getTemperatureMatrix(value: _seekbarValue)

调整对比度

ColorFilter.matrix(colorGen.getContrastMatrix(value: _seekbarValue)

旋转图像

double _rotation = 0.0;
bool _isVerticalFlip = false;
rotateWidget(Image.asset("assets/image.jpeg"),_rotation),

翻转图像

double _rotation = 0.0;
bool _isVerticalFlip = false;
flipWidget(Image.asset("assets/image.jpeg"),_rotation,_isVerticalFlip)

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

1 回复

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


当然，以下是一个关于如何使用Flutter图片编辑插件fhoto_editor的代码案例。这个插件允许你在Flutter应用中编辑图片，比如添加文本、绘制形状、应用滤镜等。

首先，你需要在你的pubspec.yaml文件中添加fhoto_editor依赖：

dependencies:
  flutter:
    sdk: flutter
  fhoto_editor: ^x.y.z  # 请替换为最新版本号

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

接下来是一个简单的示例代码，展示如何使用fhoto_editor来编辑图片：

import 'package:flutter/material.dart';
import 'package:fhoto_editor/fhoto_editor.dart';
import 'dart:io';

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File? _imageFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fhoto Editor Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile == null
                ? Text('No image selected.')
                : Image.file(_imageFile!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _editImage,
              child: Text('Edit Image'),
              enabled: _imageFile != null,
            ),
          ],
        ),
      ),
    );
  }

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

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

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

    final editorController = FhotoEditorController(_imageFile!);
    final result = await showDialog<FhotoEditorResult>(
      context: context,
      builder: (context) {
        return FhotoEditor(
          controller: editorController,
          initialText: 'Hello, World!',
        );
      },
    );

    if (result != null && result.file != null) {
      setState(() {
        _imageFile = result.file;
      });
    }
  }
}

在这个示例中：

  1. 我们定义了一个HomePage，其中包含一个用于显示选中图片的Image.file和一个用于选择图片的按钮。
  2. _pickImage方法使用image_picker插件从设备图库中选择图片。注意，image_picker插件需要单独添加到pubspec.yaml中。
  3. _editImage方法打开一个对话框，其中包含FhotoEditor小部件，允许用户编辑图片。
  4. 编辑完成后，FhotoEditor返回一个FhotoEditorResult对象，其中包含编辑后的图片文件。我们将其保存并更新UI。

请确保你已经添加了image_picker依赖，因为示例中使用了它来从设备图库中选择图片：

dependencies:
  flutter:
    sdk: flutter
  fhoto_editor: ^x.y.z  # 请替换为最新版本号
  image_picker: ^x.y.z  # 请替换为最新版本号

这样，你就可以在你的Flutter应用中实现基本的图片编辑功能了。根据需要，你可以进一步自定义和扩展这个示例。

回到顶部