Flutter图片裁剪插件native_image_cropper_ios的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter图片裁剪插件 native_image_cropper_ios 的使用

native_image_cropper_ios 是用于iOS平台的图片裁剪插件,它是 native_image_cropper 插件的一部分。该插件提供了对iOS原生图片裁剪功能的支持。

使用方法

由于 native_image_cropper_ios 是一个被认可的联邦插件(endorsed federated plugin),你可以直接在Flutter项目中使用 native_image_cropper,而无需额外配置。当你在项目中添加依赖时,此插件会自动包含在你的应用中。

示例Demo

以下是一个完整的示例代码,展示了如何使用 native_image_cropper_ios 插件来裁剪图片:

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

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:native_image_cropper_ios/native_image_cropper_ios.dart';
// 假设这些是自定义的UI组件和主题文件
// import 'package:native_image_cropper_ios_example/icon_button.dart';
// import 'package:native_image_cropper_ios_example/result.dart';
// import 'package:native_image_cropper_ios_example/slider.dart';
// import 'package:native_image_cropper_ios_example/themes.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  static const String imageName = 'sail-boat';

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

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

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: CustomThemes.theme,
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          heroTag: 'home',
          transitionBetweenRoutes: false,
          middle: Text(
            'Native Image Cropper iOS Example',
            style: TextStyle(color: CupertinoColors.white),
          ),
        ),
        child: FutureBuilder<Uint8List>(
          future: _getBytes(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final bytes = snapshot.data!;
              return Column(
                children: [
                  Image(
                    image: MemoryImage(bytes),
                    fit: BoxFit.contain,
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Flexible(
                        flex: 2,
                        child: ImageFormatSlider(
                          onValueChanged: (value) => setState(() {
                            _format = value;
                          }),
                        ),
                      ),
                      Flexible(
                        child: CupertinoIconButton(
                          icon: const Icon(
                            CupertinoIcons.crop,
                            color: CupertinoColors.black,
                          ),
                          onPressed: () => _crop(
                            context: context,
                            bytes: bytes,
                            method: _nativeImageCropperIOSPlugin.cropRect,
                          ),
                        ),
                      ),
                      Flexible(
                        child: CupertinoIconButton(
                          shape: BoxShape.circle,
                          icon: const Icon(
                            CupertinoIcons.crop,
                            color: CupertinoColors.black,
                          ),
                          onPressed: () => _crop(
                            context: context,
                            bytes: bytes,
                            method: _nativeImageCropperIOSPlugin.cropOval,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              );
            }
            return const Center(
              child: CupertinoActivityIndicator(),
            );
          },
        ),
      ),
    );
  }

  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<void>(
        context,
        CupertinoPageRoute(
          builder: (context) =>
              ResultPage(bytes: croppedBytes, format: _format),
        ),
      );
    }
  }

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

请注意:

  • 上述代码中的 CustomThemes, ImageFormatSlider, CupertinoIconButton, 和 ResultPage 是假设存在的自定义组件或页面,你需要根据实际情况替换为自己的实现。
  • 确保在项目的 pubspec.yaml 文件中正确添加了 native_image_cropper 的依赖,并且在 assets 中声明了图片资源。例如:
dependencies:
  flutter:
    sdk: flutter
  native_image_cropper: ^latest_version

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

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用native_image_cropper_ios插件进行图片裁剪的示例代码。请注意,native_image_cropper_ios是一个专门用于iOS平台的图片裁剪插件,因此这个示例代码将主要关注iOS平台。如果你还需要支持Android平台,你可能需要使用image_cropper插件,该插件同时支持iOS和Android。

步骤 1: 添加依赖

首先,你需要在pubspec.yaml文件中添加native_image_cropper_ios依赖。不过需要注意的是,由于native_image_cropper_ios是特定于iOS的,你可能还需要为Android平台使用另一个插件,如image_cropper。但在这里,我们专注于iOS。

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

步骤 2: 配置iOS项目

在iOS项目中,你可能需要一些额外的配置来确保插件能够正常工作。通常,当你添加依赖后,Flutter工具会自动处理这些配置。但如果你遇到任何问题,可以检查ios/Runner/Info.plistios/Podfile文件,确保它们没有阻止插件的集成。

步骤 3: 使用插件进行图片裁剪

下面是一个完整的Flutter代码示例,展示如何使用native_image_cropper_ios插件来选择并裁剪图片。

import 'package:flutter/material.dart';
import 'package:native_image_cropper_ios/native_image_cropper_ios.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Cropper Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _pickAndCropImage,
            child: Text('Pick and Crop Image'),
          ),
        ),
      ),
    );
  }

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

    if (pickedFile != null) {
      final File? croppedFile = await NativeImageCropperIos.cropImage(
        sourcePath: pickedFile.path,
        aspectRatioPresets: [CropAspectRatioPreset.square, CropAspectRatioPreset.ratio3x2, CropAspectRatioPreset.original],
        androidUiSettings: AndroidUiSettings(
          // 注意:这些设置仅适用于Android,对于iOS可以忽略
          toolbarTitle: 'Cropper',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false,
        ),
        iosUiSettings: IosUiSettings(
          minimumAspectRatio: 1.0,
        ),
      );

      if (croppedFile != null) {
        // 显示裁剪后的图片,或者进行其他处理
        _showCroppedImage(croppedFile);
      }
    }
  }

  void _showCroppedImage(File croppedFile) {
    // 这里你可以使用Image.file(croppedFile)来显示裁剪后的图片
    // 或者将裁剪后的图片保存到设备
    print('Cropped file path: ${croppedFile.path}');
    // 示例:显示裁剪后的图片
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Cropped Image'),
        content: Image.file(croppedFile),
      ),
    );
  }
}

注意事项

  1. 权限:确保你的应用有权限访问相册和相机。在iOS上,这需要在Info.plist文件中添加相应的权限请求。

  2. 插件版本:确保你使用的是最新版本的插件,以避免已知的错误和兼容性问题。

  3. 错误处理:在实际应用中,你应该添加适当的错误处理逻辑,以处理可能的异常情况,如用户取消选择图片、文件读取失败等。

  4. Android支持:如果你需要同时支持Android,请考虑使用image_cropper插件,它同时支持iOS和Android。

希望这个示例能帮助你在Flutter项目中成功集成并使用native_image_cropper_ios插件进行图片裁剪。

回到顶部