Flutter图片编辑插件flutter_image_editor的使用

flutter_image_editor 是一个用于编辑图片亮度、对比度和旋转的Flutter插件。该插件支持Android和iOS平台。

插件功能

这个插件演示了如何编辑图片的对比度和亮度。对于大尺寸图片，建议先压缩以避免渲染效果变慢。

示例代码

以下是一个完整的示例demo，展示了如何使用flutter_image_editor插件来调整图片的亮度和对比度。

// ignore_for_file: depend_on_referenced_packages

import 'dart:async';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_image_editor/flutter_image_editor.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final bytes = await rootBundle.load('assets/naruto.jpg');
  final buffer = bytes.buffer;
  final image = buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);

  runApp(WidgetEditableImage(imagem: image));
}

/// This widget is an example of how to use the plugin.
class WidgetEditableImage extends StatefulWidget {
  const WidgetEditableImage({
    required this.imagem,
    Key? key,
  }) : super(key: key);

  /// Image as a byte array to be edited
  final Uint8List imagem;

  @override
  WidgetEditableImageState createState() => WidgetEditableImageState();
}

class WidgetEditableImageState extends State<WidgetEditableImage> {
  late StreamController<Uint8List> _pictureStream;
  double _contrast = 1.0;
  double _brightness = 0.0;
  ByteData? _pictureByteData;
  Uint8List? _picture;

  @override
  void initState() {
    super.initState();
    _pictureStream = StreamController<Uint8List>();
    _pictureByteData = ByteData.view(widget.imagem.buffer);
    _picture = _pictureByteData!.buffer.asUint8List(
      _pictureByteData!.offsetInBytes,
      _pictureByteData!.lengthInBytes,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _containerEditableImage(
          _pictureStream,
          _picture!,
          _contrast,
          _brightness,
          _setBrightness,
          _setContrast,
          _updatePicutre,
        ),
      ),
    );
  }

  Future<void> _updatePicutre(double contrast, double brightness) async {
    final retorno = await PictureEditor.editImage(_picture!, contrast, brightness);
    _pictureStream.add(retorno as Uint8List);
  }

  void _setBrightness(double valor) {
    setState(() {
      _brightness = valor;
    });
  }

  void _setContrast(double valor) {
    setState(() {
      _contrast = valor;
    });
  }
}

Widget _containerEditableImage(
  StreamController<Uint8List> picutreStream,
  Uint8List picture,
  double contrast,
  double brightness,
  void Function(double brightness) setBrightness,
  void Function(double contrast) setContrast,
  void Function(double brightness, double contrast) updatePicutre,
) {
  return Container(
    padding: const EdgeInsets.only(top: 50),
    child: Column(
      children: <Widget>[
        const Text(
          '''
If you want to change the brightness and contrast of the image, use this on the body of sccafold''',
        ),
        Container(
          height: 300,
          width: 300,
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
          child: StreamBuilder<Uint8List>(
            stream: picutreStream.stream,
            builder: (BuildContext context, AsyncSnapshot<Uint8List> snapshot) {
              if (snapshot.connectionState == ConnectionState.active && snapshot.hasData) {
                return Image.memory(
                  snapshot.data!,
                  gaplessPlayback: true,
                  fit: BoxFit.contain,
                );
              } else {
                return Image.memory(
                  picture,
                  gaplessPlayback: true,
                  fit: BoxFit.contain,
                );
              }
            },
          ),
        ),
        Row(
          children: <Widget>[
            Column(
              children: <Widget>[
                const Text('Contraste'),
                Slider(
                  label: 'Contraste',
                  max: 10,
                  value: contrast,
                  onChanged: (valor) {
                    setContrast(valor);
                    updatePicutre(valor, brightness);
                  },
                ),
                const Text('Brilho'),
                Slider(
                  label: 'Brilho',
                  min: -255,
                  max: 255,
                  value: brightness,
                  onChanged: (valor) {
                    setBrightness(valor);
                    updatePicutre(contrast, valor);
                  },
                )
              ],
            )
          ],
        ),
      ],
    ),
  );
}

说明

1. 加载图片：通过rootBundle.load方法加载本地图片，并将其转换为Uint8List格式。
2. 初始化状态：在initState中初始化流控制器和图片数据。
3. 更新图片：通过调用PictureEditor.editImage方法更新图片的亮度和对比度。
4. UI构建：使用StreamBuilder动态显示编辑后的图片，并提供滑动条调整亮度和对比度。

请确保在项目中添加相应的权限和依赖项，并根据需要调整图片路径和其他配置。