Need help with flutter_image_editor?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

fluttercandies
171 Stars 53 Forks MIT License 198 Commits 7 Opened issues

Description

Flutter plugin, support android/ios.Support crop, flip, rotate, color martix, mix image, add text. merge multi images.

Services available

!
?

Need anything else?

Contributors list

# 45,665
Dart
Flutter
Kotlin
pub
163 commits
# 318,233
Flutter
rtc
Dart
Android
1 commit

image_editor

BUILD

The version of readme pub and github may be inconsistent, please refer to github.

Use native(objc,kotlin) code to handle image data, it is easy to process pictures, and can be used for saving/uploading/preview images.

Screenshot

img

Platform of support

Android, iOS.

Support

  • [x] flip
  • [x] crop
  • [x] rotate
  • [x] scale
  • [x] matrix
  • [x] add text
  • [x] mix image
  • [x] merge multi image
  • [x] draw somethings
    • [x] draw point
    • [x] draw line
    • [x] draw rect
    • [x] draw circle
    • [x] draw path
    • [x] draw Bezier
  • [ ] Gaussian blur

ImageEditor Usage

pub package GitHub GitHub stars

dependencies:
  image_editor: $latest

About version, please find it from pub.

Import

import 'package:image_editor/image_editor.dart';

Method list:

ImageEditor.editImage();
ImageEditor.editFileImage();
ImageEditor.editFileImageAndGetFile();
ImageEditor.editImageAndGetFile();

Example used alone

Example of extended_image

ImageEditor method params

| Name | Description | | ----------------- | -------------------------------------- | | image | dart.typeddata.Uint8List | | file | dart.io.File | | imageEditorOption | flutterimage_editor.ImageEditorOption |

ImageEditorOption

final editorOption = ImageEditorOption();
editorOption.addOption(FlipOption());
editorOption.addOption(ClipOption());
editorOption.addOption(RotateOption());
editorOption.addOption(); // and other option.

editorOption.outputFormat = OutputFormat.png(88);

Option

Flip

FlipOption(horizontal:true, vertical:false);

Clip

ClipOption(x:0, y:0, width:1920, height:1920);

Rotate

RotateOption(degree: 180);

Color Martix

ColorOption();

it's use 5x4 matrix : https://developer.android.google.cn/reference/android/graphics/ColorMatrix.html Although it is an Android document, the color matrix is also applicable to iOS.

a, b, c, d, e,
f, g, h, i, j,
k, l, m, n, o,
p, q, r, s, t

ColorOption
has some factory constructor to help use change brightness, saturation and contrast. If you have more color matrix, you can open Pull Requests or issue.

Scale

ScaleOption(width,height);

After specifying the width and height, it is not clipped, but stretched to the specified width and height (Does not maintain the aspect ratio of the image).

AddText

All of unit is pixel.

final textOption = AddTextOption();
textOption.addText(
  EditorText(
    offset: Offset(0, 0),
    text: this._controller.text,
    fontSizePx: size,
    color: Colors.red,
    fontName: '', // You must register font before use. If the fontName is empty string, the text will use default system font.
  ),
);
FontManager

Here we can use

FontManager
to register font.
File fontFile = File(path)//;
final String fontName = await FontManager.registerFont(fontFile);

// the fontName can be use int EditorText. final textOption = AddTextOption(); textOption.addText( EditorText( offset: Offset(0, 0), text: this._controller.text, fontSizePx: size, color: Colors.red, fontName: fontName, // You must register font before use. ), );

MixImage

void mix(BlendMode blendMode) async {
  final src = await loadFromAsset(R.ASSETS_SRC_PNG);
  final dst = await loadFromAsset(R.ASSETS_DST_PNG);
  final optionGroup = ImageEditorOption();
  optionGroup.outputFormat = OutputFormat.png();
  optionGroup.addOption(
    MixImageOption(
      x: 300,
      y: 300,
      width: 150,
      height: 150,
      target: MemoryImageSource(src),
      blendMode: blendMode,
    ),
  );
  final result =
      await ImageEditor.editImage(image: dst, imageEditorOption: optionGroup);
  this.image = MemoryImage(result);
  setState(() {});
}
BlendMode

Support next

BlendMode
, other will be ignored. You can also see the document of flutter.

| iOS | android(PorterDuff.Mode) | flutter(BlendMode) | | --------------------------- | ------------------------ | ------------------ | | kCGBlendModeClear | CLEAR | clear | |   | SRC | src | |   | DST | dst | | kCGBlendModeNormal | SRCOVER | srcOver | | kCGBlendModeDestinationOver | DSTOVER | dstOver | | kCGBlendModeSourceIn | SRCIN | srcIn | | kCGBlendModeDestinationIn | DSTIN | dstIn | | kCGBlendModeSourceOut | SRCOUT | srcOut | | kCGBlendModeDestinationOver | DSTOUT | dstOut | | kCGBlendModeSourceAtop | SRCATOP | srcATop | | kCGBlendModeDestinationAtop | DSTATOP | dstATop | | kCGBlendModeXOR | XOR | xor | | kCGBlendModeDarken | DARKEN | darken | | kCGBlendModeLighten | LIGHTEN | lighten | | kCGBlendModeMultiply | MULTIPLY | multiply | | kCGBlendModeScreen | SCREEN | screen | | kCGBlendModeOverlay | OVERLAY | overlay |

DrawOption

Main class :

DrawOption

Support:

  • Line
  • Rect
  • Oval
  • Points
  • Path
    • move
    • line
    • bezier2
    • bezier3

Example

Style of paint:

DrawPaint
, user can set lineWeight,color,style(stroke,fill).

OutputFormat

var outputFormat = OutputFormat.png();
var outputFormat = OutputFormat.jpeg(95);

ImageMerge

    final slideLength = 180.0;
    final option = ImageMergeOption(
      canvasSize: Size(slideLength * count, slideLength * count),
      format: OutputFormat.png(),
    );

final memory = await loadFromAsset(R.ASSETS_ICON_PNG);
for (var i = 0; i < count; i++) {
  option.addImage(
    MergeImageConfig(
      image: MemoryImageSource(memory),
      position: ImagePosition(
        Offset(slideLength * i, slideLength * i),
        Size.square(slideLength),
      ),
    ),
  );
}
for (var i = 0; i < count; i++) {
  option.addImage(
    MergeImageConfig(
      image: MemoryImageSource(memory),
      position: ImagePosition(
        Offset(
            slideLength * count - slideLength * (i + 1), slideLength * i),
        Size.square(slideLength),
      ),
    ),
  );
}

final result = await ImageMerger.mergeToMemory(option: option);
provider = MemoryImage(result);
setState(() {});

LICENSE

MIT Style.

Third party

Under Apache 2.0 style:

Some martix code come from android sdk.

TrueTypeParser : Use it to read font name.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.