Flutter网页端图片裁剪插件 native_image_cropper_web 的使用

native_image_cropper_web 是 native_image_cropper 插件的Web实现。该插件允许开发者在Flutter Web应用中进行图片裁剪操作。

使用方法

由于该插件是被认可的联合插件（endorsed federated plugin），你可以直接使用 native_image_cropper，而不需要额外配置。当你添加 native_image_cropper 到你的项目时，这个Web实现会自动包含在你的应用中。

Web平台的限制

• JPEG格式支持：由于Flutter引擎Skia不支持JPEG格式，当前版本只支持裁剪为PNG格式。
• 并发问题：在Web平台上，Dart不支持隔离（isolate）用于并发处理，这意味着对于大图片，UI可能会冻结。开发团队计划在未来实现对JPEG的支持，并研究利用Web Workers来解决这个问题。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter Web应用中使用 native_image_cropper_web 进行图片裁剪：

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

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String imageName = 'sail-boat';

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final NativeImageCropperPlugin _nativeImageCropperWeb = NativeImageCropperPlugin();
  ImageFormat _format = ImageFormat.jpg;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Native Image Cropper Web Example'),
        ),
        body: FutureBuilder<Uint8List>(
          future: _getBytes(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final bytes = snapshot.data!;
              return Column(
                children: [
                  Expanded(
                    child: Image.memory(bytes),
                  ),
                  const SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      DropdownButton<ImageFormat>(
                        value: _format,
                        items: [ImageFormat.png, ImageFormat.jpg].map((ImageFormat format) {
                          return DropdownMenuItem<ImageFormat>(
                            value: format,
                            child: Text(format.toString().split('.').last.toUpperCase()),
                          );
                        }).toList(),
                        onChanged: (ImageFormat? newValue) {
                          setState(() {
                            _format = newValue!;
                          });
                        },
                      ),
                      ElevatedButton.icon(
                        icon: const Icon(Icons.crop),
                        label: const Text('Crop Rect'),
                        onPressed: () => _crop(
                          context: context,
                          bytes: bytes,
                          method: _nativeImageCropperWeb.cropRect,
                        ),
                      ),
                      ElevatedButton.icon(
                        icon: const Icon(Icons.crop),
                        label: const Text('Crop Oval'),
                        onPressed: () => _crop(
                          context: context,
                          bytes: bytes,
                          method: _nativeImageCropperWeb.cropOval,
                        ),
                      ),
                    ],
                  ),
                ],
              );
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            }
            return const Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }

  Future<void> _crop({
    required BuildContext context,
    required Uint8List bytes,
    required Future<Uint8List> Function({
      required Uint8List bytes,
      required int x,
      required int y,
      required int width,
      required int height,
      required ImageFormat format,
    }) method,
  }) async {
    final croppedBytes = await method(
      bytes: bytes,
      x: 1200,
      y: 900,
      width: 600,
      height: 600,
      format: _format,
    );

    if (mounted) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ResultPage(
            bytes: croppedBytes,
            format: _format,
          ),
        ),
      );
    }
  }

  Future<Uint8List> _getBytes() async {
    final byteData = await rootBundle.load('assets/${MyApp.imageName}.png');
    return byteData.buffer.asUint8List();
  }
}

class ResultPage extends StatelessWidget {
  final Uint8List bytes;
  final ImageFormat format;

  const ResultPage({required this.bytes, required this.format, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cropped Image (${format.toString().split('.').last.toUpperCase()})'),
      ),
      body: Center(
        child: Image.memory(bytes),
      ),
    );
  }
}

说明

• DropdownButton 用于选择裁剪后的图片格式。
• ElevatedButton 提供了矩形和椭圆形裁剪选项。
• FutureBuilder 用于异步加载初始图片并显示加载进度条。

请确保在 pubspec.yaml 文件中正确添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  native_image_cropper: ^x.x.x # 替换为最新版本号
  # 其他依赖...

同时，在 pubspec.yaml 中添加图片资源：

flutter:
  assets:
    - assets/sail-boat.png

这样，你就可以在Flutter Web应用中实现图片裁剪功能了！