Flutter图片编辑插件aj_image_editor的使用

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

Flutter图片编辑插件aj_image_editor的使用

概述

Image Editor 是一个功能丰富的应用程序，旨在让照片编辑变得轻松愉快。无论你是摄影爱好者还是普通用户，我们的直观界面和强大的编辑工具都能满足你的需求。通过裁剪、旋转、调整颜色等功能，Image Editor 让你能够在手机上轻松实现专业级的照片编辑。

特性

  • 基本编辑工具：可以精细调整图像以达到完美效果。
  • 直观的用户界面：友好的设计确保了无缝且愉悦的编辑体验。
  • 撤销/重做功能：让你可以大胆尝试，因为你可以随时撤销或重做任何步骤。

示例

快速示例
void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: AjEditor(),
  ));
}

class AjEditor extends StatelessWidget {
  const AjEditor({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ImageEditor(
      onSave: (path) {
        // 当图片保存时打印路径
        print(path);
      },
      imagePathOrUrl:
      'https://images.pexels.com/photos/1103971/pexels-photo-1103971.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
      imageType: ImageType.network,
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用aj_image_editor插件来进行图片编辑的示例代码。这个插件允许用户进行裁剪、旋转、添加滤镜等操作。

首先，确保你已经在pubspec.yaml文件中添加了aj_image_editor依赖：

dependencies:
  flutter:
    sdk: flutter
  aj_image_editor: ^最新版本号  # 请替换为当前最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个简单的示例代码，展示如何使用aj_image_editor：

import 'package:flutter/material.dart';
import 'package:aj_image_editor/aj_image_editor.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageEditorScreen(),
    );
  }
}

class ImageEditorScreen extends StatefulWidget {
  @override
  _ImageEditorScreenState createState() => _ImageEditorScreenState();
}

class _ImageEditorScreenState extends State<ImageEditorScreen> {
  File? _imageFile;

  Future<void> _pickImage() async {
    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    
    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

  Future<void> _editImage(File imageFile) async {
    final result = await AjImageEditor.editImage(
      context,
      imageFile.path,
      cropAspectRatioPresets: [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio16x9
      ],
      maxImageWidth: 1920,
      maxImageHeight: 1920,
      enableRotation: true,
      enableFlip: true,
      enableBrightness: true,
      enableContrast: true,
      enableSaturation: true,
      enableSharpness: true,
      enableFilters: true,
      filterColors: [Colors.grey, Colors.sepia, Colors.blueGrey],
    );

    if (result != null) {
      setState(() {
        _imageFile = File(result.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Editor Demo'),
      ),
      body: Center(
        child: _imageFile == null
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('No image selected.'),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: _pickImage,
                    child: Text('Pick an Image'),
                  ),
                ],
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.file(_imageFile!),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () => _editImage(_imageFile!),
                    child: Text('Edit Image'),
                  ),
                ],
              ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

  1. 使用ImagePicker从设备的图库中选取一张图片。
  2. 使用AjImageEditor.editImage方法来打开图片编辑器，允许用户对图片进行编辑。
  3. 编辑完成后，将编辑后的图片重新显示在界面上。

请注意，你需要确保在android/app/src/main/AndroidManifest.xml文件中添加必要的权限，比如访问存储的权限，以便能够选择图片。

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

此外，从Android 6.0（API级别23）开始，你还需要在运行时请求这些权限。你可以使用permission_handler插件来请求权限。

希望这个示例能帮助你理解如何在Flutter项目中使用aj_image_editor插件进行图片编辑。

回到顶部