FhotoEditor

FhotoEditor 插件，通过滤镜、裁剪和变换，提供简单易用的图像编辑支持。

要开始使用，我们只需要在应用程序模块的gradle文件中添加依赖项，如下所示

安装

首先，在您的 pubspec.yaml 文件中添加 image_editor_plus: 作为依赖项。

导入

import 'package:fhoto_editor/fhoto_editor.dart';

然后运行 flutter pub get 来安装该包。

iOS

将以下键添加到您的 Info.plist 文件中，位于 /ios/Runner/Info.plist

  • NSPhotoLibraryUsageDescription – 描述您的应用为何需要照片库权限。在可视化编辑器中，这被称为“隐私 – 照片库使用描述”。

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

主要特点

这是 PhotoEditing 插件中已完成的更新。

对给定图像应用单个滤镜

对给定图像应用多个滤镜

滤镜后保存图像

裁剪图像

调整

Brightness

饱和度

曝光

阴影

高光

暗角

褪色

鲜艳度

温度

对比度

旋转

翻转

演示

Alt text

用法

图像单滤镜

创建颜色生成器类实例

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 小部件

                    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 {
 // Create a ByteData buffer to hold the image data.
 final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
 final Uint8List pngBytes = byteData!.buffer.asUint8List();

 // Get the device's default directory for storing files.
 final directory = await getTemporaryDirectory();

 // Create a file to write the image data to.
 final File file = File('${directory.path}/filtered_image.png');

 // Write the image data to the file.
 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 is used here for scale down larger images before loading into memory.
 /// preferredSize is being used here for square images
 /// context.size?.longestSide.ceil() is to get actual size of height and width of image

 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) {
    // cannot crop, widget is not setup
    return null;
  }

  /// scale up to use maximum possible number of pixels
  /// this will sample image in higher resolution to make cropped image larger
  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)),
)

Alt text

调整色相

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

Brightness

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)

GitHub

查看 Github