FLUTTER ECOSYSTEM

bladeofgod/flutter_image_editor

切り取り、スクラビル、モザイク、テキスト追加、反転、回転機能を備えた画像エディタ。

flutter_image_editor のプロジェクト画像
Stars
51
Forks
32
最終プッシュ(UTC)
2023/11/02
プロジェクト状態
公開中
bladeofgod GitHub avatar
GITHUB User

bladeofgod ↗

言語DartJavaRubySwiftObjective-C

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 5 件

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

README を開く / 閉じる

image_editor_dove

A high-performance image editor with crop, scribble, mosaic, add-text, flip, rotated functions.

Support custom ui style.

  • drawing

draw.gif

  • rotate

flip&rotate.gif

  • mosaic

mosaic.gif

  • add or delete text

text_delete.gif

addtext_done.gif

Getting Started

First, add image_editor: as a dependency in your pubspec.yaml file.

import

import 'package:image_editor/flutter_image_editor.dart';

iOS Add the following keys to your Info.plist file, located in /ios/Runner/Info.plist:

  • NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.
  • NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.
  • NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor. Or in text format add the key:
<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string>

Android

No configuration required - the plugin should work out of the box.

Usage

pick an image that wanna edit, and pass it to image editor like this:

  Future<void> toImageEditor(File origin) async {
    return Navigator.push(context, MaterialPageRoute(builder: (context) {
      return ImageEditor(
        originImage: origin,
        //this is nullable, you can custom new file's save postion
        savePath: customDirectory
      );
    })).then((result) {
      if (result is EditorImageResult) {
        setState(() {
          _image = result.newFile;
        });
      }
    }).catchError((er) {
      debugPrint(er);
    });
  }

custom ui style

You can extends ImageEditorDelegate and custom editor's widget:

ImageEditor.uiDelegate = YouUiDelegate();

class YouUiDelegate extends ImageEditorDelegate{
    ...
}