Flutter图片滤镜处理插件photofilters的使用

photofilters 是一个用于在 Flutter 应用中对图片应用滤镜效果的插件。它提供了预设的滤镜，并允许你创建自定义滤镜。

安装

首先，在你的 pubspec.yaml 文件中添加 photofilters 和 image 作为依赖：

dependencies:
  flutter:
    sdk: flutter
  photofilters: ^0.9.0
  image: ^3.0.1

iOS

无需配置，插件应该开箱即用。

Android

无需配置，插件应该开箱即用。

示例

以下是一个完整的示例，展示了如何使用 photofilters 插件从图库中选择图片并应用滤镜。

示例代码

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:path/path.dart';
import 'package:photofilters/photofilters.dart';
import 'package:image/image.dart' as imageLib;
import 'package:image_picker/image_picker.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String fileName;
  List<Filter> filters = presetFiltersList;
  final picker = ImagePicker();
  File imageFile;

  Future getImage(context) async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      imageFile = File(pickedFile.path);
      fileName = basename(imageFile.path);
      var image = imageLib.decodeImage(await imageFile.readAsBytes());
      image = imageLib.copyResize(image, width: 600);
      Map imagefile = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PhotoFilterSelector(
            title: Text("Photo Filter Example"),
            image: image,
            filters: presetFiltersList,
            filename: fileName,
            loader: Center(child: CircularProgressIndicator()),
            fit: BoxFit.contain,
          ),
        ),
      );

      if (imagefile != null && imagefile.containsKey('image_filtered')) {
        setState(() {
          imageFile = imagefile['image_filtered'];
        });
        print(imageFile.path);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Filter Example'),
      ),
      body: Center(
        child: Container(
          child: imageFile == null
              ? Center(
                  child: Text('No image selected.'),
                )
              : Image.file(File(imageFile.path)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => getImage(context),
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

UI 屏幕截图

滤镜示例图片

No Filter	AddictiveBlue	AddictiveRed	Aden

Amaro	Ashby	Brannan	Brooklyn

…（更多滤镜图片）

卷积滤镜示例图片

Identity	Emboss	Sharpen	Colored Edge Detection

Blur	Edge Detection Medium	Edge Detection Hard	Gaussian Blur

…（更多卷积滤镜图片）

滤镜类型

图像滤镜

图像滤镜直接将子滤镜应用于整个图像，计算成本较高，因为复杂性和时间随着子滤镜数量的增加而增加。

你可以创建自定义图像滤镜，如下所示：

import 'package:photofilters/filters/image_filters.dart';

var customImageFilter = ImageFilter(name: "Custom Image Filter");
customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(coloredEdgeDetectionKernel));
customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(gaussian7x7Kernel));
customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(sharpenKernel));
customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(highPass3x3Kernel));
customImageFilter.subFilters.add(ConvolutionSubFilter.fromKernel(lowPass3x3Kernel));
customImageFilter.subFilters.add(SaturationSubFilter(0.5));

你也可以继承 ImageFilter 类来创建另一个图像滤镜：

class MyImageFilter extends ImageFilter {
  MyImageFilter() : super(name: "My Custom Image Filter") {
    this.addSubFilter(ConvolutionSubFilter.fromKernel(sharpenKernel));
  }
}

颜色滤镜

颜色滤镜逐像素应用其子滤镜，计算成本较低，因为它只遍历一次图像像素，无论子滤镜的数量如何。

你可以创建自定义颜色滤镜，如下所示：

import 'package:photofilters/filters/color_filters.dart';

var customColorFilter = ColorFilter(name: "Custom Color Filter");
customColorFilter.addSubFilter(SaturationSubFilter(0.5));
customColorFilter.addSubFilters([BrightnessSubFilter(0.5), HueRotationSubFilter(30)]);

你也可以继承 ColorFilter 类：

class MyColorFilter extends ColorFilter {
  MyColorFilter() : super(name: "My Custom Color Filter") {
    this.addSubFilter(BrightnessSubFilter(0.8));
    this.addSubFilter(HueRotationSubFilter(30));
  }
}

子滤镜

有两种类型的子滤镜。一种可以添加到 ColorFilter，另一种可以添加到 ImageFilter。你可以继承 ColorSubFilter 类来实现前者，可以使用 ImageSubFilter 混入来实现后者。你可以创建一个可以在图像和颜色滤镜中使用的子滤镜。BrightnessSubFilter 是一个这样的例子：

class BrightnessSubFilter extends ColorSubFilter with ImageSubFilter {
  final num brightness;
  BrightnessSubFilter(this.brightness);

  /// Apply the [BrightnessSubFilter] to an Image.
  @override
  void apply(Uint8List pixels, int width, int height) =>
      image_filter_utils.brightness(pixels, brightness);

  /// Apply the [BrightnessSubFilter] to a color.
  @override
  RGBA applyFilter(RGBA color) =>
      color_filter_utils.brightness(color, brightness);
}

入门指南

有关 Flutter 的入门指南，请查看我们的 在线文档。

有关编辑包代码的帮助，请查看 文档。